Angular中可以使用ngx-permissions和Angular AuthGuard来实现基于角色的访问控制。以下是使用ngx-permissions的示例代码：

1. 安装ngx-permissions

npm install ngx-permissions --save

2. 在需要使用权限控制的模块中引入NgxPermissionsModule

import { NgxPermissionsModule } from 'ngx-permissions'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, NgxPermissionsModule.forRoot()], bootstrap: [AppComponent] }) export class AppModule {}

3. 在AuthGuard中使用

import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { NgxPermissionsService } from 'ngx-permissions';

@Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate {

constructor(private permissionsService: NgxPermissionsService) {}

canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree { const allowedRoles = next.data.allowedRoles; return this.permissionsService.hasPermission(allowedRoles) .pipe(map((hasPermission: boolean) => { if (!hasPermission) { return false; } return true; })); } }

4. 在路由中配置角色权限

{ path: 'secure-data', component: SecureDataComponent, canActivate: [AuthGuard], data: { allowedRoles: ['Admin'] } }

以上代码将只允许Admin角色的用户访问secure-data路由下的组件。