如何在Angular中使用路由守衛

在Angular中使用路由守衛可以保護路由，以確保用戶只能訪問特定的頁面或執行特定的操作。要使用路由守衛，首先需要創建一個實現CanActivate、CanActivateChild、CanDeactivate、CanLoad任何這些接口之一的服務。然后，將這個服務添加到應用的路由配置中。

以下是一個簡單的示例：

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 檢查用戶是否已經登錄，如果已登錄，則允許訪問路由，否則重定向到登錄頁面
    if (localStorage.getItem('token')) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

然后，在路由配置中使用這個路由守衛：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/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]
})
export class AppRoutingModule { }

在這個例子中，AuthGuard服務會檢查用戶是否已經登錄，如果已登錄則允許訪問路由，否則重定向到登錄頁面。要在應用中使用該路由守衛，只需將AuthGuard添加到路由配置中的canActivate數組中。