如何在Angular中阻止用户角色的操作

// 定义用户角色枚举
enum UserRole {
  Admin = 'admin',
  User = 'user'
}

// 定义路由守卫
@Injectable()
export class RoleGuard implements CanActivate {
  constructor(private authService: AuthService) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 获取当前用户角色
    const userRole = this.authService.getUserRole();

    // 检查用户角色是否允许执行该操作
    if (userRole !== UserRole.Admin) {
      // 用户角色不符合要求，阻止用户操作
      console.log('您没有权限执行该操作！');
      return false;
    }

    // 用户角色符合要求，允许用户操作
    return true;
  }
}

// 在路由配置中使用路由守卫
const routes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [RoleGuard] // 使用路由守卫进行权限验证
  },
  // 其他路由配置...
];

// 在组件中使用路由守卫
@Component({...})
export class AdminComponent {
  constructor(private router: Router) {}

  // 示例方法，当用户点击执行某个操作时调用
  onActionClick() {
    // 检查用户角色是否允许执行该操作
    if (!this.router.url.includes('/admin')) {
      console.log('您没有权限执行该操作！');
      return;
    }

    // 执行操作的逻辑...
  }
}