526互联

无感刷新token令牌

发布时间 2023-12-11 15:37:30作者: jaaks

首先判断token是否过期

const isTokenExpired = () => {
  if (store.getters.getToken) { // 判断是否过期
    const payload = store.getters.getToken.split('.')[1]
    const decoded = JSON.parse(atob(payload))
    const now_time = Math.floor(new Date() / 1000)
    return now_time > decoded.exp //返回true则是过期
  }
}

设置一个axios请求刷新令牌得到新的token

const Getrefresh = async () => {
  try {
    const response = await axios.post('http://127.0.0.1:5000/refresh', {}, {
      headers: {
        Authorization: 'Bearer ' + store.getters.getRefreshToken
      }
    })
    if (response.status === 200) {
      store.dispatch('setToken', {
        token: response.data
      })
      return response.data
    }
  } catch (error) {
    console.error('刷新令牌请求失败', error)
    throw error // 抛出异常，由调用方处理
  }
}

在axios请求拦截器中设置

instance.interceptors.request.use(async function (config) {
  // 在发送请求之前做些什么
  if (isTokenExpired()) { // 判断过期后刷新令牌
    try {
      const token = await Getrefresh()
      // 刷新成功后重新发起请求
    } catch (error) {
      // 刷新失败，可以在这里处理跳转到登录页等逻辑
      throw new Error('Token 刷新失败')
    }
  }
  config.headers.Authorization = store.getters.getToken ? 'Bearer ' + store.getters.getToken : ''
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})