Angular 中的 AuthGuard 是一個路由守衛，它用於保護某些路由，只有當使用者經過身份驗證並具有訪問許可權時，才允許他們訪問。AuthGuard 通常與路由配置一起使用，以確保使用者無法直接訪問需要身份驗證的頁面。

AuthGuard 是一個 Angular 服務，可以使用以下命令來建立它：

```bash
ng g guard auth
```

上面的命令將生成一個名為“auth”的 AuthGuard，並將其新增到 `src/app/auth.guard.ts` 檔案中。`auth.guard.ts` 檔案中的程式碼如下所示：

```typescript
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean urltree=""> | Promise<boolean urltree=""> | boolean | UrlTree {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}
```

在上面的程式碼中，AuthGuard 是透過實現 CanActivate 介面來定義的。CanActivate 介面包含一個名為 `canActivate()` 的方法，該方法決定了當使用者嘗試訪問受保護的路由時應該執行哪些操作。

在 AuthGuard 中，我們注入了一個名為 `AuthService` 的服務和 `Router` 物件。`AuthService` 用於檢查使用者是否已經登入，而 `Router` 用於導航到登入頁面或者使用者試圖訪問的頁面。在 `canActivate()` 方法中，我們首先呼叫 `this.authService.isLoggedIn()` 方法來檢查使用者是否已經登入。如果使用者已經登入，我們返回 true，表示使用者可以訪問該路由。否則，我們呼叫 `this.router.navigate(['/login'])` 方法，將使用者重定向到登入頁面，然後返回 false，表示使用者無法訪問該路由。

要使用 AuthGuard 來保護一個路由，我們需要在路由配置中將 AuthGuard 新增到 `canActivate` 屬性中。例如：

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

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

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

在上面的程式碼中，我們將 AuthGuard 新增到了 `/dashboard` 路由的 `canActivate` 屬性中，這意味著只有當使用者已經登入時才能訪問 `/dashboard` 路由。</boolean></boolean>

關於 Angular 中的 AuthGuard

相關文章