标签：const user ges can this class import color get
今年下半年一直很忙，没有多少时间来写博客，很多笔记都记在了本地一起提交到了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，实现类似同步的效果，在回调中完成了判断。
标签：const user ges can this class import color get
原文地址：https://www.cnblogs.com/ljwsyt/p/10245459.html
