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

Question

我已经有一个 AuthService 用于在登录时对用户进行身份验证，还有一个 AuthGuard 用于在未登录时阻止访问。

有些页面我通过 UserProfile/Role 限制访问，但现在我需要阻止页面上的操作。

我有像 "Admin, Manager, Support and Agent" 这样的角色，从大到小。

如何将级别设置为仅经理或更高级别以编辑所有人都可以访问的页面上的内容（支持和代理仅限查看）？

这是我当前的 canActivate 方法：

canActivate(route: ActivatedRouteSnapshot) {

  const currentUser = JSON.parse(localStorage.getItem('currentUser'));
  if (currentUser) {
    // check if route is restricted by role
    if (route.data.roles && route.data.roles.indexOf(currentUser.role) === -1) {
      // role not authorised so redirect to home page
      this.router.navigate(['/']);
      return false;
    }
    // authorised so return true
    return true;
  }
  // not logged in so redirect to login page
  this.router.navigate(['auth/login']);
  return false;
}

这是我的模块routing.module.ts

const routes: Routes = [{
  path: '',
  component: ReportsComponent,
  canActivateChild: [AuthGuard],
  children: [
    {
      path: 'blocked-users',
      component: BlockedUsersComponent,
      data: { roles: [Role.admin, Role.manager, Role.suporte, Role.agent] },
      children: [
        { ...

需要修正这两个主题：

1) Line data: { roles: [] } 我只想传低层（比如Agent）；

2) 内部组件告诉只有经理可以编辑数据（或者只有 disable 一个按钮，如果角色 == 支持或代理）

Answer 1

将您的授权代码分解为您的警卫和其他服务都可以使用的服务（干！）。从那里开始，检查整个站点周围角色的逻辑是相同的。

@Injectable()
export class RoleAuthorisationService {
  public isAuthorised(roles: Role[]): boolean {
    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
    if (!currentUser) return false;
    return roles.indexOf(currentUser.role) >= 0)
  }
}

守卫将使用它，但随后您可以通过自己检查该授权服务来阻止使用您页面的任何部分。

你的守卫（非常接近因为它是23:32而且我想睡觉）：

export class YourGuard {

  constructor(private readonly auth: RoleAuthorisationService) {}

  canActivate(route: ActivatedRouteSnapshot) {
    if (route.data.roles && !this.auth.isAuthorised(route.data.roles)) {
      // role not authorised so redirect to home page
      this.router.navigate(['/']);
      return false;
    } else {
      // authorised so return true
      return true;
    }

    // not logged in so redirect to login page
    this.router.navigate(['auth/login']);
    return false;
  }
}

想在屏幕上隐藏 'Edit' 按钮吗？

模板：

<h1>Some details<h1>
<button *ngIf="canEdit" (click)="enableEditing()>Edit</button>
<p>Details etc etc...</P>

TS:

export class SomeComponent {
  private readonly editors: Role[] = [Role.Agent, Role.Administrator];

  constructor(private readonly auth: RoleAuthorisationService) {}

  public get canEdit(): boolean { return this.auth.isAuthorised(this.editors); }
}

编辑：要为您锁定事物的更具体问题添加答案，除非用户是 'a manager or higher'，您可以（如上所述）非常具体地说明可以访问该功能的确切角色，或者你可以使用枚举。只要您的枚举按顺序指定，您就可以进行基本的 > = < 检查。

export enum Role {
  Admin = 1,
  Manager = 2,
  Support = 3,
  Peon = 4
}

...

return CurrentUser.Role <= Role.Manager;

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

How to prevent actions by user role in Angular

security

angular

angular-guards