Angular路由守卫实现页面访问控制

ng generate guard auth

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(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    // 在这里实现你的授权逻辑
    if (this.authService.isAuthorized()) {
      return true; // 用户已授权，允许访问
    } else {
      // 用户未授权，重定向到登录页或仪表盘
      this.router.navigateByUrl('/login'); // 或者 '/dashboard'
      return false; // 阻止访问
    }
  }
}

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private currentUserRoles: string[] = []; // 假设这里存储了当前用户的角色

  // 示例方法：设置用户角色（实际中从后端获取）
  setUserRoles(roles: string[]) {
    this.currentUserRoles = roles;
  }

  isAuthorized(): boolean {
    // 检查用户是否已登录
    return !!localStorage.getItem('authToken'); // 简单示例，实际可能更复杂
  }

  hasRole(role: string): boolean {
    // 检查用户是否拥有特定角色
    return this.currentUserRoles.includes(role);
  }
}

// auth.guard.ts 中 canActivate 方法
// ...
if (this.authService.isAuthorized() && this.authService.hasRole('admin')) {
  return true;
} else {
  this.router.navigateByUrl('/unauthorized'); // 重定向到未授权页面
  return false;
}
// ...

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard'; // 导入你的守卫
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'unauthorized', component: UnauthorizedComponent },
  { 
    path: 'admin', 
    component: AdminDashboardComponent, 
    canActivate: [AuthGuard] // 应用AuthGuard到admin路由
  },
  // 其他路由...
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

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