token无感刷新

Token无感刷新通常指的是在用户不知情的情况下自动刷新认证Token,以保持用户的会话状态。这通常在使用JWT(JSON Web Tokens)作为认证方式时使用。以下是实现无感刷新的一种常见方法:

  1. 前端请求拦截:
  • 在发送请求前,检查Token的有效期。
  • 如果Token即将过期(例如,距离过期时间小于5分钟),则自动发送一个刷新Token的请求。
  1. 后端刷新逻辑:
  • 后端接收到刷新Token的请求后,验证旧Token的有效性。
  • 如果旧Token有效,后端生成一个新的Token并返回。
  1. 前端响应拦截:
  • 捕获到需要认证的请求(例如401状态码:HTTP401错误代表用户没有访问权限,需要进行身份认证),自动重发刷新Token的请求。
  • 使用新的Token重发原请求。
  1. 存储和替换Token:
  • 前端在接收到新的Token后,替换存储中的旧Token。

这种机制确保了用户在使用应用时,Token可以在用户不知情的情况下被更新,避免了用户因Token过期而需要重新登录的情况。


前端(使用Axios拦截器)

javascript 复制代码
axios.interceptors.request.use(
  async (config) => {
    const token = getToken(); // 从存储中获取Token
    const tokenExpiration = getTokenExpiration(); // 获取Token的过期时间
    const now = Date.now();

    if (token && tokenExpiration && (tokenExpiration - now < 5 * 60 * 1000)) {
      // Token即将过期,需要刷新
      const newToken = await refreshToken(); // 刷新Token的函数
      setToken(newToken); // 更新存储中的Token
      config.headers['Authorization'] = `Bearer ${newToken}`;
    }

    return config;
  },
  error => Promise.reject(error)
);

axios.interceptors.response.use(
  response => response,
  async (error) => {
    if (error.response.status === 401) {
      // Token过期,需要刷新
      const newToken = await refreshToken();
      setToken(newToken);
      error.config.headers['Authorization'] = `Bearer ${newToken}`;
      return axios(error.config); // 重发原请求
    }
    return Promise.reject(error);
  }
);

这种方法确保了用户体验的连贯性,同时保持了系统的安全性。

相关推荐
旭日猎鹰24 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
sinat_384241092 小时前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
小牛itbull2 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i2 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_2 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
GIS瞧葩菜2 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
zhang-zan3 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520313 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm