创建 Angular Guard

在 Angular 中，Guard 是一个用于控制路由访问权限的服务。Guard 在用户试图访问一个受保护的路由时，会检查用户是否满足条件，如果满足条件则允许访问，否则则阻止访问。

创建一个 Guard 非常简单。首先，你需要使用 Angular CLI 来创建一个 Guard：

ng generate guard your-guard

这将在你的应用程序中创建一个名为 "your-guard" 的 Guard，并生成以下文件：

• your-guard.guard.ts : Guard 类
• your-guard.guard.spec.ts : Guard 测试文件
• your-guard.guard.ts : Guard 依赖注入器

编写 Guard

接下来，你需要在 Guard 类中编写业务逻辑。在我们的例子中，我们将创建一个简单的 Guard，用于检查用户是否已经登录，如果用户未登录，则阻止他们访问受保护的路由。

你可以在 your-guard.guard.ts 文件中编写业务逻辑，例如：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class YourGuard implements CanActivate {
  
  constructor(private authService: AuthService, private router: Router) { }
  
  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

在这个例子中，我们注入了 AuthService 和 Router 服务，并实现了 CanActivate 接口。在 canActivate 方法中，我们检查用户是否已经登录。如果用户已经登录，则 canActivate 方法返回 true，否则它会重定向到登录页面，并返回 false。

注册 Guard

最后，你需要在 app.module.ts 中注册你的 Guard：

import { YourGuard } from './your-guard.guard';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    AuthService,
    YourGuard // 将 Guard 添加到 providers 数组中
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在你的 Guard 已经准备好了！可以使用它来保护你的路由了。