Angular中的路由守衛如何使用以實現導航控制和權限檢查

在Angular中，路由守衛是一個用于控制導航的機制，可以用來實現導航控制和權限檢查。路由守衛可以在路由的不同階段進行攔截和處理，包括 canActivate、canActivateChild、canDeactivate、canLoad等。

下面是一個簡單的示例，演示如何使用路由守衛實現權限檢查和導航控制：

1. 創建一個AuthGuard服務，實現CanActivate接口來進行權限檢查：

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

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 在這里進行權限檢查邏輯，返回true或false
    if (hasPermission) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

2. 在路由模塊中配置路由守衛：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { LoginComponent } from './login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
export class AppRoutingModule { }

在上面的示例中，當用戶訪問根路徑時會觸發AuthGuard進行權限檢查，如果用戶沒有權限，則會重定向到登錄頁面。AuthGuard類中的hasPermission可以是根據用戶角色或其他條件來判斷用戶是否有權限訪問某個路由。

通過配置路由守衛來實現權限檢查和導航控制，可以有效地保護應用程序中的敏感內容并控制用戶的訪問權限。