具有可选id的角度保护无元件路由

基础概念

角度保护无元件路由（Angular Protected Route without Component） 是指在Angular框架中，通过路由守卫（Route Guards）来保护某些路由，使其在特定条件下才能被访问，而不需要为这些路由指定一个具体的组件。这种技术常用于权限控制，确保只有满足特定条件的用户才能访问某些页面或功能。

类型

Angular提供了几种内置的路由守卫：

CanActivate：决定是否允许进入某个路由。
CanActivateChild：决定是否允许进入某个子路由。
CanDeactivate：决定是否允许离开当前路由。
Resolve：在路由激活之前获取数据。

应用场景

权限控制：根据用户的角色或权限来决定是否允许访问某些页面。
表单验证：在离开当前页面前，检查表单是否已保存或验证通过。
数据预加载：在路由激活之前，预先加载所需的数据。

示例代码

假设我们有一个需要管理员权限才能访问的路由，可以使用CanActivate守卫来实现：

// auth.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 AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const isAdmin = /* 检查用户是否为管理员的逻辑 */;
    if (isAdmin) {
      return true;
    } else {
      this.router.navigate(['/unauthorized']); // 重定向到未授权页面
      return false;
    }
  }
}

在路由配置中使用这个守卫：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'admin', canActivate: [AuthGuard], children: [] }, // 没有指定组件
  { path: 'unauthorized', component: UnauthorizedComponent },
  // 其他路由配置
];

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