Angular 2+ 角色权限

Posted 2023-02-23

【中文标题】Angular 2+ 角色权限

【英文标题】：Angular 2+ Role Permissions

【发布时间】：2018-09-21 15:35:39

【问题描述】：

我目前正在使用 Angular 6 制作一个小项目来练习一些客户端-服务器交互，这是一个简单的博客风格网站，用户可以在其中查看其他人的帖子并制作自己的帖子。到目前为止，我已经解决了 JWT 身份验证和路由保护，以防止未登录的人查看受保护的资源。

项目当前的结构方式是每个用户都有一个由ProfilePage 组件显示的用户配置文件。在我的路由器中，我导航到具有/user/:username 结构的正确用户页面，其中:username 是服务器将发送回适当数据的特定用户页面。我要解决的问题是如何做到这一点，以便登录到其帐户的用户只能在其个人资料页面上添加和删除帖子，而不能在其他人的页面上添加和删除帖子。

我已经阅读了用户权限和角色，但是如果两个用户的角色都是“USER”，我如何区分用户是否正在查看他们的页面？

我的一些想法：

当用户导航到页面时动态检查页面上的权限，所以我会向服务器发送一个请求（使用 JWT 承载），它会发回页面的用户/编辑角色状态，然后何时用户发布了一些东西，服务器会在后端实际进行更改之前再次验证是否允许用户发布。

我的另一个想法是制作一个单独的 MyProfile 组件，它的行为、外观和感觉都像用户配置文件，除了编辑器按钮。不过，我可以看到的问题是，当我实现可以删除任何用户的帖子的管理员角色时，我稍后会遇到麻烦（出于本项目的教育目的，道德除外）。

类似于第一个想法，但是当用户登录时，记下他们的用户名，然后在客户端检查该权限，然后在他们实际创建/删除帖子时在服务器端检查他们是否实际上允许这样做。

这些选项中的任何一个似乎都是可行的前进方式吗？如果我仍然可以使用 Guard 做到这一点，那又如何呢？

【参考方案1】：

我会选择你的解决方案 3。

事实上，您甚至不需要在用户登录时存储用户名。当您在应用程序中采用 JWT 授权时，您应该存储 JWT 令牌（如果登录时在 cookie 中设置它，您甚至不需要手动存储它）。

您的 JWT 令牌应包括关于您的用户的非常基本的信息（可能是用户名或 UUID，以及您认为合适的其他信息）以及令牌信息。当您的用户访问个人资料页面时，您应该使用此 JWT 令牌从您的后端检索用户信息。 （即在授权标头中附加此 JWT 不记名令牌，或将其包含在 cookie 中。您的后端应读取此 JWT 令牌并检索唯一标识符（建议的用户名/uuid）以检索用户信息）

当用户即将更新用户信息时，您应该再次附加 JWT 不记名令牌，并且后端应该根据需要使请求无效。

我还建议只为普通用户启用/user 路由，或类似/myprofile 路由。管理员说，/user/:username 路由只对有权查看他人资料的人开放。

【讨论】：

感谢您的反馈，使用 JWT 作为用户名确实为我提供了几乎免费的功能！

【参考方案2】：

我会将用户自己的个人资料页面放在自己的路线中，而不是与其他人的路线相同。通过这种方式，您可以在个人、私人个人资料页面上提供所有安全性（服务器端），而其他人的个人资料页面将是一个公共页面，没有任何编辑、删除、添加等方式。