Angular 6 授权 - UI 权限与 API 权限答案

【问题标题】：Angular 6 Authorization - UI permissions Vs API permissionsAngular 6 授权 - UI 权限与 API 权限
【发布时间】：2019-02-27 20:32:10
【问题描述】：

我正在创建小型 Angular 6 应用程序。我的 Angular UI 显示从 Web API (2.0) 返回的数据。我已经实现了 JWT 身份验证。

现在我正在 UI 和 API 中实现授权。就像 UI 中的每个控件都将具有存储在数据库中的权限。此外，API 中的每个操作都将具有存储在数据库中的权限。一个用户将拥有所有权限（UI 权限 + API 权限）。

对于 UI/API 授权，我使用令牌来读取权限。在 UI 中有 *ngIf 检查，在 API 中有自定义 fitler AuthorizeAttribute 编写来检查权限。

请让我知道上述方法是否非常适合 Angular + API 环境？

【问题讨论】：

标签： api authorization jwt angular6

【解决方案1】：

对于 Angular 前端应用程序控制，请使用 ngx-permissions 包，因为它为每个元素/路由提供基于角色和权限的控制。权限可以在主应用程序中加载一次，然后 html 元素可以具有 *ngxPermissionsOnly="['permission-name']" 属性。类似的路由控制可以使用NgxPermissionsGuard实现。

对于 API 访问控制，如果应用程序使用 JAVA Spring Boot，则可以为每个 REST 端点使用 @PreAuthorize 注释。

【讨论】：