Angular路由守衛怎么實現

在Angular中，路由守衛（Route Guards）是一種特殊的類，它可以決定一個路由是否可以激活，或者在激活之前執行一些邏輯。Angular提供了幾種不同類型的路由守衛：

1. CanActivate：決定一個路由是否可以激活。
2. CanActivateChild：決定一個路由的子路由是否可以激活。
3. Resolve：在路由激活之前獲取數據，確保數據在組件渲染之前加載完成。
4. CanDeactivate：決定在路由離開之前是否允許用戶離開當前頁面。
5. ResolveGuard：類似于Resolve守衛，但是可以用于子路由。

下面是如何實現這些守衛的基本步驟：

1. 創建守衛

首先，你需要創建一個新的TypeScript文件來實現守衛接口。例如，創建一個can-activate.guard.ts文件：

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

@Injectable({
  providedIn: 'root'
})
export class CanActivateGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    // 在這里添加你的邏輯
    if (/* 條件 */) {
      return true; // 允許路由激活
    } else {
      this.router.navigate(['/some-path']); // 重定向到其他路徑
      return false; // 不允許路由激活
    }
  }
}

2. 注冊守衛

創建守衛后，你需要在路由配置中注冊它。在你的app-routing.module.ts文件中：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanActivateGuard } from './can-activate.guard';
import { SomeComponent } from './some.component';

const routes: Routes = [
  {
    path: 'some-path',
    component: SomeComponent,
    canActivate: [CanActivateGuard] // 注冊守衛
  },
  // 其他路由配置...
];

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

3. 實現其他守衛

對于其他類型的守衛，你需要實現相應的接口（如CanActivateChild, Resolve, CanDeactivate等），并按照上述步驟注冊和使用它們。

4. 使用守衛

守衛可以用于各種場景，例如：

• 在用戶未登錄時阻止訪問某些頁面。
• 在用戶嘗試離開頁面時彈出確認對話框。
• 在路由激活前預加載數據。

通過這種方式，你可以控制應用程序的導航行為，并在路由變化時執行必要的邏輯。