ABP 项目中 Angular 前端路由守卫添加指南

在 ABP 项目中，Angular 前端路由守卫可以新建在 'src/app/shared/auth' 文件夹下。要新增一个路由守卫，可以按照以下步骤进行：

在 'src/app/shared/auth' 文件夹下新建一个名为 'auth.guard.ts' 的文件。
在 'auth.guard.ts' 文件中，引入所需的依赖和模块，例如 'CanActivate' 和 'ActivatedRouteSnapshot'。
创建一个名为 'AuthGuard' 的类，并实现 'CanActivate' 接口。
在 'AuthGuard' 类中，实现 'canActivate' 方法，该方法用于判断用户是否有权限访问该路由。
在 'canActivate' 方法中，根据需要的权限逻辑进行判断，如果有权限则返回 'true'，否则返回 'false' 并导航到其他页面。
在需要进行权限保护的路由配置中，使用 'canActivate: [AuthGuard]' 指定该路由需要通过 'AuthGuard' 进行权限判断。

以下是一个示例的 'AuthGuard' 代码：

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(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      
    // 在这里进行权限判断逻辑
    // 如果有权限则返回true，否则返回false并导航到其他页面
    if (/* 权限判断条件 */) {
      return true;
    } else {
      this.router.navigate(['/unauthorized']);
      return false;
    }
  }

}

然后在需要进行权限保护的路由配置中使用 'canActivate: [AuthGuard]'，例如：

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] },
  // 其他路由配置...
];

这样就完成了在 abp 项目中新增一个路由守卫。