Angular 应用程序的角色和权限工具

Question

我们正在构建 angular 应用程序，我们在其中调用后端 REST API 进行用户身份验证。 此 REST API 使用 Windows 身份验证进行用户身份验证。

现在，我们想为我们的 angular 应用程序实现角色和权限。 我们的要求如下

1. 具有只读访问权限的用户应该只能阅读我们应用程序中的某些页面。
2. 应允许具有写访问权限的用户修改特定页面中的数据。

谁能建议我们如何实现这一目标？

可能正在使用一些开源工具？

问候 Vipul

Answer 1

Angular 有一个名为guards的内置机制来实现这一点——我们使用它来检查来自Keycloak 服务器的用户权限。 例如，有一个CanActivate守卫，您可以在此处查看文档。

 const adminRoutes: Routes = [ { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], children: [ { path: '', children: [ { path: 'crises', component: ManageCrisesComponent }, { path: 'heroes', component: ManageHeroesComponent }, { path: '', component: AdminDashboardComponent } ], } ] } ];

Answer 2

如果我正确理解，您需要的是仅当用户有权编辑页面时才显示按钮。

如果您想阻止某种用户访问某个页面，则 Guard 很有用。 根据您的帖子，所有用户都可以访问该页面。 但是，并非所有人都能够编辑该页面。

我认为您需要一个解析器，直接从路由发送用户数据。

这是它的工作原理：

@Injectable({ providedIn: 'root' })

export class MeResolver implements Resolve<any> {
  constructor(private http: HttpClient) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<any>|Promise<any>|any {
    // This should return user data (take care of sending token too)
    return this.http.get<any>(`${environment.api}/auth`)
  }
}

在您的路由文件中，您必须正确：

{
    path: '',
    component: UserComponent,
    resolve: [ MeResolver ],
}

然后，在您的组件中，您可以使用route属性访问解析器，例如：

export class UserComponent {

  $me: Observable<any> = this.route.data.pipe(map(elem => elem[0]));

  constructor(private route: ActivatedRoute) { }

}

这样，您就可以在 HTML 中隐藏“编辑”按钮：

<button (click)="edit()" *ngIf="(me$ | async)?.role.admin">EDIT</button>