在前端实现JWT（理解jwt的概念）答案

【问题标题】：Implementing JWT on front end (understanding concept of jwt)在前端实现JWT（理解jwt的概念）
【发布时间】：2021-12-12 17:37:05
【问题描述】：

当我有我的用户的令牌时，我参与了 JWT 的实施，并且我正在 Angular 中实施身份验证保护。在每次路由更改时，它都会调用 isAuthenticated()，现在我有问题了。我可以在没有密钥的情况下在前端解码 JWT 令牌以获得过期，但黑客也可以在本地存储中更改他的令牌，以增加过期时间。如果我正确理解 JWT 概念，解决方案是 a) function isAuthenticated() call API for example backend.xxx.com/isAuthenticated, if token is valid 200 - is authenticated, else 401 - isnt authenticated. b) validate token with same secret that is on backend. 你能告诉我什么是解决这个问题的好方法吗？我刚刚看到教程/博客上的人在没有验证它的情况下解码令牌，所以我很困惑，我理解正确

【问题讨论】：

您的 JWT 不会阻止恶意用户访问您的 Angular 应用程序的任何部分。将令牌检查更多地视为客户端的可用性功能，而所有数据安全性都在服务器上处理。只要您在 API 中发送特权信息之前验证令牌，能够绕过客户端 AuthGuard 的恶意用户就无关紧要，因为他们只会看到一个空白页面。顺便说一句，不要将 Token 存储在本地存储中。将其存储在内存中或 http-only cookie 中。
但有一种情况，用户正在使用他的常规帐户登录，并声称 ROLE_USER。在那之后，他正在改变他的主张，并提供假的 JWT TOKEN。当然，他不会收到任何机密数据，但他将能够看到管理仪表板的布局。那么这种情况我应该不关心吗？

标签： angular jwt frontend backend

【解决方案1】：

您可能知道，JWT 令牌由三部分组成：

Header -> 包含令牌类型和使用的算法

有效负载 -> 包含数据

签名 -> 根据前两部分计算的哈希值，可以使用密码来计算。

首先，您应该使用签名的密码，然后在每次需要时使用后端解码和验证令牌。前端应该无法解码令牌，这是因为有动机的黑客可以在您缩小的 js 中找到密码，并且情况不会改变。

【讨论】：

好吧，所以我不应该在前端验证令牌，因为它可以从脚本中获取。因此，正如上面讨论的那样，我是否应该不在乎是否有人提供假 jwt 令牌，因为他只会看到空布局，没有功能？
伪造的令牌应该会导致来自后端的 401 响应，因为符号不匹配并且后端不会验证令牌。由您决定是显示空白页面还是错误页面（我喜欢显示错误页面，我关心我的黑客用户体验；））
我在谈论安全性，对于路由，您可以检查令牌是否存在以供用户体验，您将仅针对 API 调用验证它
@korallo 基本上，是的。每个 API 端点都应该（如果需要某种身份验证）检查给定的 JWT 是否有效，然后才返回 200 状态（可能还有数据）。否则，后端会返回一个错误代码，您的前端会对此做出反应，例如在客户端发出“注销”。这可能是删除 localStorage/cookies，重定向到登录屏幕，...
由于前端在用户浏览器中运行，他总是有可能绕过某些东西。最后一个选项是为每个导航按钮发送一个 API 调用，并从后端发送重定向，但此时 AuthGuard 将无用。