React如何从localStorage存储的JWT token中提取信息？是否需要客户端解密？

1. 存储JWT后React的常规交互逻辑 #

你把JWT存在localStorage之后，通常有三类交互场景：

• 请求自动携带token：封装全局请求工具（比如axios）时添加请求拦截器，每次发请求前从localStorage.getItem('jwt-token')取出token，放到请求头Authorization字段中，格式为Bearer <你的token值>，后端会通过这个字段识别请求对应的用户身份。
  示例拦截器代码：

  import axios from 'axios'
  axios.interceptors.request.use(config => {
    const token = localStorage.getItem('jwt-token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  })
  

• 路由权限控制：配合路由库（比如react-router）实现路由守卫，跳转需要鉴权的页面前先判断localStorage中是否存在有效token，不存在直接重定向到登录页，避免未登录用户访问受限页面。
• 过期失效处理：给请求工具加响应拦截器，当后端返回401状态码（代表token过期/无效）时，直接清除localStorage中的token，强制跳转到登录页让用户重新登陆。

2. 从JWT获取用户角色不需要解密 #

JWT本身由三段.分隔的Base64URL编码字符串组成，分别是Header（头）、Payload（载荷）、Signature（签名）。其中Payload段只是明文编码，没有做加密处理，你只需要做Base64解码就能拿到里面存储的用户角色、过期时间等自定义字段，完全不需要解密。
你可以直接用原生JS解码，也可以用jwt-decode这类轻量工具库快速解析：

// 原生JS解码示例
function parseJwt(token) {
  const payload = token.split('.')[1]
  return JSON.parse(window.atob(payload.replace(/-/g, '+').replace(/_/g, '/')))
}
const token = localStorage.getItem('jwt-token')
const userRole = parseJwt(token)?.role

注意：前端根据角色渲染页面只是做体验优化，核心权限校验必须全部放在后端实现。前端的所有校验逻辑都可以被用户手动篡改，后端每个需要权限的接口都要自行验证JWT的合法性和对应角色权限，不能只依赖前端的判断。

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