Angular 路由守卫：实现管理员页面访问限制与权限控制

ng generate guard guards/admin-auth

// src/app/guards/admin-auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service'; // 假设你有一个认证服务

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

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    // 在这里实现你的权限检查逻辑
    if (this.authService.isAdmin()) { // 假设 authService 有一个 isAdmin() 方法来检查用户是否为管理员
      return true; // 允许访问
    } else {
      // 用户未授权，重定向到其他页面（例如仪表盘或登录页）
      this.router.navigateByUrl('/dashboard'); // 或 '/login'
      return false; // 阻止访问
    }
  }
}

// src/app/services/auth.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private currentUserRole: string = 'user'; // 示例：当前用户角色

  constructor() {
    // 实际应用中，这里会从后端获取用户角色或从本地存储读取
    // 例如：this.currentUserRole = localStorage.getItem('userRole');
  }

  // 模拟用户登录，设置管理员角色
  loginAsAdmin(): void {
    this.currentUserRole = 'admin';
    console.log('Logged in as Admin');
  }

  // 模拟用户登录，设置普通用户角色
  loginAsUser(): void {
    this.currentUserRole = 'user';
    console.log('Logged in as User');
  }

  // 检查当前用户是否为管理员
  isAdmin(): boolean {
    return this.currentUserRole === 'admin';
  }

  // 检查用户是否已认证 (可根据需要扩展)
  isAuthenticated(): boolean {
    return this.currentUserRole !== null; // 简单判断
  }
}

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminDashboardComponent } from './components/admin-dashboard/admin-dashboard.component'; // 你的管理员页面组件
import { DashboardComponent } from './components/dashboard/dashboard.component'; // 普通用户仪表盘
import { LoginComponent } from './components/login/login.component'; // 登录组件
import { AdminAuthGuard } from './guards/admin-auth.guard'; // 导入你的守卫

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'admin',
    component: AdminDashboardComponent,
    canActivate: [AdminAuthGuard] // 将守卫应用于 'admin' 路由
  },
  // 其他路由...
  { path: '**', redirectTo: '/dashboard' } // 未匹配路由重定向
];

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