Angular5 路由守卫

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

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

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

angular2以上，路由有CanActivate守卫和另一个跳转守卫canDeactivate。
两者一个是访问路由时触发，一个是离开路由页面时触发。

 import {CanActivate, Router} from '@angular/router';

 @Injectable()
 export class AuthGuard implements CanActivate {
 roleType: string;

 constructor(private testHeaderService: TestHeaderService, private _message: NzMessageService) {
 this.testHeaderService = testHeaderService
 this._message = _message
 }

 canActivate(): boolean | Observable<boolean> | Promise<boolean> {
 return new Observable((observer) => {
 this.testHeaderService.checkRole().then((res) => {
 this.roleType = res['roleType']
 if (this.roleType === 'teacher') {
 observer.next(true);
 observer.complete();
 return;
 }
 observer.next(false);
 observer.complete();
 })
 });

 }
 }

 async checkRole() {
 let url = '/api/starmoocInfo/getUserInfo';
 if (sessionStorage.aSessionId != null && sessionStorage.aSessionId !== '') {
 url = '/api/starmoocInfo/getUserInfo?aSessionId=' + sessionStorage.aSessionId;
 }
 const res = await this.http.get(url).toPromise()
 return res
 }

使用：
path: '',
component: QuestionsComponent,
canActivate: [AuthGuard],

如果提前有保存角色信息，则可以直接取角色进行判断，就可以直接在方法中判断一下return就行了。但是要时时查询，就会有同步异步的问题。
angular的httpclient请求是异步的。想要使用类似同步的效果，但是试了很久都没有成功。最后使用回调的方式。而守卫的判断和返回在回调中，会一直报错，因为必须要在外层有一个返回才行。也就是说，在查询返回之前，已经进行了判断，查询也就无效了。也试了定时器，一样会报语法错误。
最后使用rxjs的Observable和Promise，实现类似同步的效果，在回调中完成了判断。