Angular路由守衛 canActivate

作用

canActivate
控制是否允許進入路由。
canActivateChild
等同 canActivate，只不過針對是所有子路由。

關鍵代碼

創建路由守衛

import { Injectable } from '@angular/core';
import {
  CanActivate,
  Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  CanActivateChild,
} from '@angular/router';

@Injectable()
export class CanActivateGuard implements CanActivate, CanActivateChild {

  constructor(
    private _router: Router,
  ) { }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
  ): boolean {
    //在這里判定是否跳轉目標路由
    //如果可以跳轉頁面，返回true,不能，則返回false
    //建議邏輯
    //1.是否登錄
    //2.訪問是否要求權限
    //3.查詢當前登錄用戶是否擁有目標權限
    //如果不符合條件，則根據selectBestRoute()方法返回其他頁面

    //這里的permission是在routes-routing.module.ts中data:{permission:'yourPermission'}傳參過來的內容
    console.log('該頁面所需權限:'+route.data['permission']);
    
    return true;
  }

  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
  ): boolean {
    return this.canActivate(route, state);
  }
}

設置路由守衛

{
	path: 'can-activate', 
	component: CanActivateComponent,
	//權限permission，CanActivateGuard判定
	data:{permission:'yourPermission',title: '你的標題'},
	//設置路由守衛為CanActivateGuard
	canActivate: [CanActivateGuard],
}

示例代碼

示例代碼

參考資料

Angular路由守衛
CanActivate