使用HttpOnly Cookie存储JWT时如何存储access token及跟踪用户登录状态

实现方案解答 #

登录态存储逻辑优化 #

你当前用HttpOnly Cookie存储JWT令牌的方案是完全正确的，也是同场景下安全性最高的选择，比存localStorage/sessionStorage更能抵御XSS攻击，完全不需要把access token暴露到前端可读写的存储中。
你选择用React Context存储用户信息的思路也没问题：Context数据保存在应用内存中，只要页面不刷新，前端路由切换时数据不会丢失，只有首次打开站点、刷新页面两种场景需要向服务端请求校验登录态，其余路由切换场景直接读取Context即可，不需要重复发请求，完全能满足导航栏条件渲染的需求。 #

具体实现调整建议 #

1. 登录态校验逻辑优化

你在App组件useEffect中调用接口拉取用户信息的思路可直接落地，补充两点说明：

• 用refresh token查询用户信息不属于不良实践，refresh token本身就需要在服务端持久化存储，用来做长期身份校验，反而你不需要把access token存入数据库，JWT是自包含的令牌，只要验证签名合法即可直接解析用户信息，存数据库属于冗余操作。
• 你现有服务端/get-user接口存在拼写错误：req.cookies["acceess-token"]多写了一个字母e，需要修正为access-token。

2. Access Token刷新逻辑

你提到的「先请求业务接口，接口返回401/403状态码时再调用/token接口刷新access token，之后重试原请求」是行业通用的标准实现，你可以通过axios响应拦截器统一处理，不需要每个业务接口单独写兼容逻辑，示例代码如下：

// 封装统一的axios实例
import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:4000',
  withCredentials: true
})

// 添加响应拦截器
api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config
    // 仅当接口返回401且未重试过的场景触发刷新逻辑
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      try {
        // 调用刷新token接口，会自动把新的access token写入HttpOnly Cookie
        await api.post('/token')
        // 重试用户原本要发起的请求
        return api(originalRequest)
      } catch (refreshErr) {
        // 刷新失败说明refresh token也已失效，清空用户态跳登录页
        // 这里可以调用你UserContext的setContext方法清空用户信息
        window.location.href = '/sign-in'
        return Promise.reject(refreshErr)
      }
    }
    return Promise.reject(error)
  }
)

export default api

后续所有业务接口都用这个封装好的axios实例发起请求即可。

3. 现有代码体验优化

• 登录接口/sign-in校验通过后可以直接把用户的基础信息（id、姓名、邮箱等）返回给前端，前端直接存入UserContext，不需要额外再调用一次/get-user接口，减少不必要的请求。
• 登出操作时除了调用服务端/logout接口，还要同步清空UserContext中的用户信息，避免登出后前端还显示登录态。

常见疑问解答 #

• 是不是每次切换/刷新页面都要发请求？
  只有刷新页面或者首次打开站点需要发1次请求校验登录态，前端路由切换时内存中的Context不会丢失，不需要发请求。
• 要不要把access token存到localStorage？
  不需要，你当前用HttpOnly Cookie存储的方案安全性更高，localStorage容易被XSS攻击窃取敏感信息。

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