Oauth 2.0 如何使用OAuth2在SPA上处理授权和身份验证？

我正在开发一个水疗中心，希望有SSO。 据我目前所知，OAuth2和OIDC是SPA SSO的最佳解决方案。 比SAML更好。

到目前为止，我还不知道如何在SPA的JS代码中使用授权令牌来处理SPA各种资源上的授权。例如，我希望角色为“买家”的用户可以访问“购物历史”选项卡，而其他用户无权访问该选项卡

我应该在JS代码中解析从授权服务器获得的访问令牌，并检查用户是否具有查看选项卡的适当角色，还是应该在服务器（API）端做出此决定，在这种情况下，SPA的代码将仅从API读取答案并基于该自定义UI
对于第一种方法，是否有任何标准的检查方法（以某种JS库的形式）

谈到身份验证，什么是更好的方法（更安全等）：

• 要让SPA（此时已加载到浏览器中）执行身份验证流，并基于结果让用户使用其受保护的功能。这实际上是伪身份验证，因为代码在用户的浏览器中，这意味着用户正在对自己手中的代码进行身份验证，即对自己进行身份验证。这种身份验证有意义吗
• 要求用户进行身份验证，以便能够在其浏览器中加载SPA。这可能不是SPA体系结构，因为服务于SPA的后端应该能够与身份验证服务器创建一个反向通道

---

用户登录后，您将根据他的用户ID请求身份验证，并且他所属的角色将收到用户有权获得的所有权限

您可以将这些权限转换为声明，并将其发送回UI，并相应地使用它来显示功能

---

您还可以在服务器端api上强制执行相同的操作，以防止除用户界面之外的任何未经授权的访问。

根据用户描述，您的应用程序必须根据用户类型而有所不同。如果是这种情况，我建议您使用后端进行身份验证，并决定从后端提供应用程序内容。否则，正如您所了解的，在浏览器上运行身份验证和更改用户视图是不安全的

在我看来，这并不一定会打破SPA体系结构。您所做的是根据提供给您的令牌更改您的服务器。此外，使用此方法还需要维护会话。SPA对后端的调用需要包含此会话才能获取内容