Angular5 路由守卫

今年下半年一直很忙，没有多少时间来写博客，很多笔记都记在了本地一起提交到了git上边。

夏末的时候做的两个vue项目中有接触到vue的路由守卫，今天在另外一个angular上，发现路由守卫有异常，导致可以跨权限访问页面。

路由守卫就不多介绍了，作业顾名思义，就是在路由跳转时判断权限的。

angular2以上，路由有CanActivate守卫和另一个跳转守卫canDeactivate。

两者一个是访问路由时触发，一个是离开路由页面时触发。

 1 import {CanActivate, Router} from '@angular/router';
 2 
 3 @Injectable()
 4 export class AuthGuard implements CanActivate {
 5 roleType: string;
 6 
 7 constructor(private testHeaderService: TestHeaderService, private _message: NzMessageService) {
 8 this.testHeaderService = testHeaderService
 9 this._message = _message
10 }
11 
12 canActivate(): boolean | Observable<boolean> | Promise<boolean> {
13 return new Observable((observer) => {
14 this.testHeaderService.checkRole().then((res) => {
15 this.roleType = res['roleType']
16 if (this.roleType === 'teacher') {
17 observer.next(true);
18 observer.complete();
19 return;
20 }
21 observer.next(false);
22 observer.complete();
23 })
24 });
25 
26 }
27 }
28 
29 async checkRole() {
30 let url = '/api/starmoocInfo/getUserInfo';
31 if (sessionStorage.aSessionId != null && sessionStorage.aSessionId !== '') {
32 url = '/api/starmoocInfo/getUserInfo?aSessionId=' + sessionStorage.aSessionId;
33 }
34 const res = await this.http.get(url).toPromise()
35 return res
36 }

使用：

path: '',

component: QuestionsComponent,

canActivate: [AuthGuard],

如果提前有保存角色信息，则可以直接取角色进行判断，就可以直接在方法中判断一下return就行了。但是要时时查询，就会有同步异步的问题。

angular的httpclient请求是异步的。想要使用类似同步的效果，但是试了很久都没有成功。最后使用回调的方式。而守卫的判断和返回在回调中，会一直报错，因为必须要在外层有一个返回才行。也就是说，在查询返回之前，已经进行了判断，查询也就无效了。也试了定时器，一样会报语法错误。

最后使用rxjs的Observable和Promise，实现类似同步的效果，在回调中完成了判断。