在 Angular 中,我们可以使用守卫(Guard)来保护路由。为了实现不同角色的子项目 Angular 路由中的 RoleGuard,可以按照以下步骤进行操作:
RoleGuard
类,实现 CanActivate
接口,并注入一个用于管理用户角色的服务(例如 AuthService
):import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class RoleGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
// 获取当前用户的角色
const userRole = this.authService.getUserRole();
// 根据角色判断是否有权限访问该路由
if (userRole === 'admin') {
return true; // 有权限
} else {
// 跳转到无权限页面或其他处理
this.router.navigate(['/no-access']);
return false; // 无权限
}
}
}
RoleGuard
来保护需要授权访问的路由:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RoleGuard } from './role.guard';
const routes: Routes = [
{
path: 'admin',
canActivate: [RoleGuard], // 使用 RoleGuard 保护该路由
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
},
// 其他路由配置
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
AuthService
中实现获取用户角色的方法,可以根据具体需求从后端获取角色信息,或者从本地存储中获取:import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AuthService {
getUserRole(): string {
// 从后端获取用户角色或从本地存储中获取角色
const userRole = localStorage.getItem('userRole');
return userRole;
}
}
这样,当用户访问 admin
路由时,RoleGuard
会检查用户角色,如果角色为 admin
,则允许访问;否则,会导航到无权限页面或其他处理。
请注意,上述代码示例仅为演示目的。在实际应用中,您可能需要根据具体的角色和权限需求进行相应的修改。
上一篇:不同角色的用户的REST控制器