Angular 路由守卫：控制访问权限与安全验证

路由守卫是一种在路由导航过程中对特定路由进行安全验证和控制访问权限的机制。它可以在路由导航之前、之中和之后执行特定的逻辑。

在 Angular 中，路由守卫有以下几种类型：

'CanActivate'：在路由导航之前执行，用于确定是否允许导航到特定路由。可以用来检查用户是否已经登录或是否具有特定的权限。
'CanActivateChild'：在子路由导航之前执行，用于确定是否允许导航到子路由。可以用来检查用户是否具有访问子路由的权限。
'CanDeactivate'：在路由导航之前执行，用于确定是否允许离开当前路由。可以用来进行一些数据保存或确认操作。
'Resolve'：在路由导航之前执行，用于解析路由数据。可以用来获取路由所需的数据，例如从服务器加载数据。
'CanLoad'：在惰性加载模块之前执行，用于确定是否允许加载惰性加载的模块。可以用来检查用户是否具有访问惰性加载模块的权限。

要使用路由守卫，需要在路由配置中指定相应的守卫，并实现相应的守卫接口。守卫可以是一个服务，也可以是一个函数。

例如，下面是一个使用'CanActivate'守卫的示例：

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 {
      // 如果用户未登录，则导航到登录页面
      return this.router.parseUrl('/login');
    }
  }
}

在上面的示例中，'AuthGuard'是一个实现了'CanActivate'接口的服务。它通过'AuthService'来检查用户是否已经登录。如果用户已经登录，则返回'true'，允许导航到目标路由；如果用户未登录，则导航到登录页面。

要在路由配置中使用该守卫，可以在目标路由的'canActivate'属性中指定守卫：

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

在上面的示例中，只有当'AuthGuard'的'canActivate'方法返回'true'时，才允许导航到'dashboard'路由。否则，会被导航到登录页面。