Angular 5 中的 JWT 授权

Posted 2023-03-10

【中文标题】Angular 5 中的 JWT 授权

【英文标题】：JWT Authorization in Angular 5

【发布时间】：2018-09-22 09:58:45

【问题描述】：

我正在尝试实现 JWT 身份验证和授权，但是我担心 JWT 在前端部分被篡改。我现在让后端工作顺利且安全。现在我在 Angular 5 中实现 JWT 授权和身份验证。我是实现 JWT 令牌的初学者，所以请耐心等待，希望你们能对此有所了解。

我知道，每当您篡改令牌时，JWT 都会因为签名而失效。然后后端将拒绝处理请求，但是假设前端有以下场景：

1 - 邪恶用户使用普通帐户登录并从后端接收 JWT 令牌。

2 - 恶意用户通过向有效负载添加额外的“管理员”角色来篡改 JWT 令牌（这会使 jwt 无效）

3 - 邪恶用户尝试访问持有被篡改的 JWT 令牌的受保护路由

4 - 路由守卫检查令牌是否过期（通过检查有效负载中的过期声明？）

5 - 用户决定再次篡改 JWT 以增加 JWT 过期声明（根据后端 JWT 令牌仍然无效）

6 - Route 解码 JWT 并看到 JWT 没有过期，并且用户具有管理员角色并允许邪恶用户访问页面并看到呈现的 html（后端操作是安全的，因为令牌首先得到验证)

我错过了什么吗？我怎样才能防止这种情况发生？我想阻止用户访问该页面，即使它会半途而废。

【参考方案1】：

我认为你说得对。

为避免此类问题，您可以做的是在用户首次进入管理模块时发出请求，以检查令牌是否有效。如果没有，您断开连接或重定向。

Secodn 选项是让它流动，并实现一个 HTTP 拦截器。用户将能够看到后台的 HTML，但他最终必须提出请求。在这种情况下，您将拦截器重定向到 403 错误，这意味着您的用户将永远无法访问您的后端数据。

最后，您还可以在应用程序启动时存储令牌的初始值，并在用户进入管理模块时检查该值是否已更改。

如果值已更改，则用户使用他的令牌进行游戏，您可以重定向他。

【讨论】：

我喜欢第一个和最后一个选项的想法。在您的最后一个选项中，我将如何在应用程序启动时存储令牌的初始值？如果我将它放在本地、会话或 cookie 存储中，初始值是否也不能被篡改？如果我将它保存在 Angular 的内存中，它也会在页面刷新后丢失，对吧？

是的，如果您将它存储在 Angular 应用程序中，它会在页面刷新期间丢失。如果它存储在浏览器内存中，用户也可以篡改它，你是对的。您可以做的是自己加密令牌的初始值，这意味着用户无法篡改它。在我看来，最后一个选项并不是更好的选项，我只是想详尽并列出您可以使用的所有可能性。

感谢您的回答，我会继续选择第一个选项:)