React前端能否解码并验证JWT？签名验证是否需后端完成？

1. 前端能否完全完成JWT的解码与验证？ #

• 解码完全可以在前端实现：JWT的payload部分是Base64URL编码的，你可以用jwt-decode这类库直接解码，或者自己写简单的解码逻辑拿到令牌里的用户信息、过期时间等内容。示例代码：

  import jwtDecode from 'jwt-decode';
  const token = localStorage.getItem('authToken');
  if (token) {
    const decodedPayload = jwtDecode(token);
    console.log('用户信息:', decodedPayload.user);
    console.log('过期时间:', new Date(decodedPayload.exp * 1000));
  }
  

• 签名验证不建议在前端完成：虽然技术上可以用密钥在前端验证签名，但安全性完全没有保障。

2. React应用必须借助后端做签名验证吗？ #

技术上前端能做，但实际生产环境必须依赖后端。前端验证签名需要用到密钥（HMAC密钥或RSA公钥），如果把密钥放在前端代码里，很容易被攻击者通过调试工具、反编译等方式获取到。一旦密钥泄露，攻击者就能随意伪造JWT，前端的验证等于形同虚设。

3. "签名验证必须在后端执行"的观点是否正确？ #

这个观点完全正确。

• 后端可以安全存储密钥，不会暴露给外部；
• 前端发送请求时携带JWT，后端用密钥验证签名的合法性，确认令牌未被篡改、未过期后，再返回对应的资源或权限确认；
• 前端可以做一些辅助校验（比如检查exp字段判断令牌是否过期），但这只是优化用户体验的手段，最终的有效性必须由后端验证。

内容的提问来源于stack exchange，提问作者Blankman