Angular中利用canActive（路由守衛功能）限制路由跳轉

使用angular作為前端框架時，通過路由實現元件之間跳轉，很多時候都需要對元件的訪問作許可權攔截。比如某些頁面（元件）登入後才能訪問，某些頁面需要特殊許可權（角色）才能訪問。我們後臺需要根據使用者身份進行資料攔截，Angular也需要對路由跳轉進行攔截。下面我用一個攔截登入的例子簡單介紹一下該功能。

1.建立一個自己的服務元件用於驗證使用者是否登入

// src/app/user/login-auth.service.ts
import { Injectable } from '@angular/core';
import
 
 { Http,Headers,RequestOptions } from '@angular/http';

@Injectable()
export class LoginAuthService {
  private headers = new Headers({'Content-Type': 'application/json;'});
  private options = new RequestOptions({ headers: this.headers });
  constructor(private http:Http ){ }
  // 是否登入
  public isLogin
 
(): boolean {
    const token = localStorage.getItem('token');
    // Check whether the token is expired and return
    // true or false
    return !this.isTokenExpired(token);
  }

  //利用http請求判斷使用者是否登入或token是否過期
  private isTokenExpired(token:string):boolean{
      ...
      this.http.get....
      ...

      return
 
 isTokenExpired
  }
}

2.建立路由驗證服務，實現CanActivate介面

// src/app/user/auth.service.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { LoginAuthService } from './login-auth.service';

@Injectable()
export class AuthService implements CanActivate {

  constructor(public router: Router,private loginAuth:LoginAuthService) {}

  canActivate(): boolean {
      if(!this.loginAuth.isLogin()){
          this.router.navigate(['login']);
          return false;
      }
       return true;
  }

}

3.路由列表中對需要登入才能訪問的路徑下加上canActive

import { Routes } from '@angular/router';
import { AuthService } from './user/auth.service';

export const ROUTES: Routes = [
    ...
    {
        path: 'personal/:id',
        component: PersonalComponent,
        canActivate: [AuthService]
    },
    ...
]

4.最後別忘了在AppModule的providers加入服務元件

@NgModule({
  declarations: [
      PersonalComponent
   ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(ROUTES, { preloadingStrategy: PreloadAllModules })
  ],
  providers: [AuthService,LoginAuthService],
  bootstrap: [AppComponent]
})
export class AppModule { }

這只是一個簡單登入攔截例子，如果有複雜的角色身份認證，使用這個方式都一樣可以實現。無非定義不同的驗證服務，根據當前使用者身份進行匹配。
如果還想詳細瞭解路由守衛功能，可通過官網詳細瞭解，連結如下：
https://angular.cn/guide/router#milestone-5-route-guards