今年下半年一直很忙，沒有多少時間來寫博客，很多筆記都記在了本地一起提交到了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，實現類似同步的效果，在回調中完成了判斷。

Angular5 路由守衛