前端如何实现无感刷新token

1,118 阅读1分钟

Token是一种用于身份验证的令牌,通常用于前后端交互。由于Token有过期时间,当Token过期后,需要重新获取新的Token。因此,前端需要实现Token的自动刷新来避免用户在使用过程中因Token过期而需要重新登录的情况。以下是前端无感刷新Token的方法:

1. 使用setInterval定时刷新Token

可以使用setInterval函数定时向后端服务器请求新的Token来刷新旧的Token。例如,在每个小时的59分钟时刷新Token:

setInterval(() => {
  // 向后端服务器发送请求获取新的Token
}, 59 * 60 * 1000);

2. 使用setTimeout延时刷新Token

可以使用setTimeout函数在Token过期前一段时间刷新Token。例如,在Token过期前5分钟刷新Token:

setTimeout(() => {
  // 向后端服务器发送请求获取新的Token
}, (tokenExpireTime - Date.now() - 5 * 60 * 1000));

3. 使用axios拦截器自动刷新Token

可以使用axios拦截器,在每次向后端服务器发送请求前判断Token是否过期,如果过期则自动刷新Token。以下是一个示例:

import axios from 'axios';

const api = axios.create({
  baseURL: '<http://example.com/api>',
  timeout: 5000,
});

api.interceptors.request.use(
  (config) => {
    const tokenExpireTime = localStorage.getItem('tokenExpireTime');
    if (tokenExpireTime && Date.now() > tokenExpireTime) {
      // 向后端服务器发送请求获取新的Token
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default api;

以上是一些前端无感刷新Token的方法,可以根据具体的项目需求进行选择和实现。