vue axios token刷新--vue后台管理

需求

最近在写项目，跟后端 讨论token刷新方案：前端登录后，后端返回token和refreshToken有效时间，当token过期时要求用refreshToken去获取新的token，前端需要做到无痛刷新token，即请求刷新token时要做到用户无感知。

分析

前端登录后会返回 token 和refreshToken。token30分钟过期 refreshToken一天过期,利用这个时间差就可以做到无痛刷新token

方法一：发起请求后拦截 当token 过期后调用refreshToken 接口 拿到新token 然后在吧之前的请求在执行一遍。当refreshToken过期，直接跳回登录页

方法二： 后端提供一个token过期时间的字段，在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。

实现

这里我们实现方法一
这里需要跟后端约定好返回数据，比如：

{code: 418, message: 'token过期', data: {}}

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.BASE_API, // url = base url + request url

  // timeout: 5000 // request timeout
  withCredentials: true,
 
});

// 给实例添加一个setToken方法，用于登录后将最新token动态添加到header，同时将token保存在localStorage中
instance.setToken = (token,refreshToken) => {
instance.defaults.headers['Authorization'] = `Auth ${token}`
// 这里用到的存储是localStorage
window.localStorage.setItem('token', token)
  
window.localStorage.setItem('refreshToken', refreshToken)
}

function refreshToken () {

  // 我项目中  更新token 需要吧原有的token 换成refreshToken去请求   这里根据需求可以改动
  window.localStorage.setItem('token', window.localStorage.refreshToken)
  return instance({method:'post',url: '/api-token-refresh'})
}
  // 设置了路由拦截  这里清掉token 就会跳回登录页
function removeToken () {
  window.localStorage.removeItem('token')
  window.localStorage.removeItem('refreshToken')

}

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 每次发送请求之前判断vuex中是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    
    
    const token = window.localStorage.token;

    token && (config.headers.Authorization = `Auth ${token}`);


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


// 是否正在刷新的标记
let isRefreshing = false
// 重试队列，每一项将是一个待执行的函数形式
let requests = []
// 响应拦截器
instance.interceptors.response.use(
  response => {
    const res = response.data


    if(res.code === 418){
            const config = response.config
      if (!isRefreshing) {
        isRefreshing = true
       
          
        
        return refreshToken().then(res => {
    
          const { token ,refreshToken} = res.data
         
          
          instance.setToken(token,refreshToken)
          config.headers['Authorization'] = `Auth ${token}`
          config.baseURL = ''
          console.log('token过期刷新接口');
           //  这里有个小问题  当在重试中 如果接口报错 就会直接跳转到登录页  需要后端配合
          // 已经刷新了token，将所有队列中的请求进行重试
          
          requests.forEach(cb => cb(token))
          requests = []
          return instance(config)
        },err=>{
          console.log(err)
          
        }).catch(res => {

         
          removeToken()
          router.push('/login')
          console.error('refreshtoken error =>', res)
         
          
        }).finally(() => {
          console.log('这边');
          
          isRefreshing = false
        })
      }else {
        // 正在刷新token，将返回一个未执行resolve的promise
        // 保存函数 等待执行
        // 吧请求都保存起来 等刷新完成后再一个一个调用
        return new Promise((resolve) => {
          // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
          requests.push((token) => {
            config.baseURL = ''
            config.headers['Authorization'] = `Auth ${token}`
            resolve(instance(config))
          })
        })
        
      }
    
    }  

  
    
 

    
     if (res.code === 0) {
   //  所有失败拦截
      return Promise.reject(res);
      // return res
    }
    return res
  },
  error => {
     console.log(error);
  
    return Promise.reject();
  }
);

export { instance };

优化

问题:

当token过期，调用refreshToken方法后，拿到新的token去发送之前的请求 这个时候如果后端没处理好 返回给你400状态码 就会进入catch然后就需执行重新登录的操作

解决方法：
不需要在catch 进行删除token和跳回登录页操作。当refreshToken过期，后端会返回{code: 419, message: 'refreshToken过期,请重新登录', data: {}} 当然还有 token不合法 token未认证 等情况。

完整代码

import axios from "axios";

const instance = axios.create({
  baseURL: process.env.BASE_API, // url = base url + request url

  // timeout: 5000 // request timeout
  withCredentials: true,
 
});

// 给实例添加一个setToken方法，用于登录后将最新token动态添加到header，同时将token保存在localStorage中
instance.setToken = (token,refreshToken) => {
instance.defaults.headers['Authorization'] = `Auth ${token}`
// 这里用到的存储是localStorage
window.localStorage.setItem('token', token)
  
window.localStorage.setItem('refreshToken', refreshToken)
}

function refreshToken () {

  // 我项目中  更新token 需要吧原有的token 换成refreshToken去请求   这里根据需求可以改动
  window.localStorage.setItem('token', window.localStorage.refreshToken)
  return instance({method:'post',url: '/api-token-refresh'})
}
  // 设置了路由拦截  这里清掉token 就会跳回登录页
function removeToken () {
  window.localStorage.removeItem('token')
  window.localStorage.removeItem('refreshToken')

}

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 每次发送请求之前判断vuex中是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    
    
    const token = window.localStorage.token;

    token && (config.headers.Authorization = `Auth ${token}`);


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


// 是否正在刷新的标记
let isRefreshing = false
// 重试队列，每一项将是一个待执行的函数形式
let requests = []
// 响应拦截器
instance.interceptors.response.use(
  response => {
    const res = response.data
    // refreshToken过期 或者 token不合法 token未认证 
    if(res.code === 419||420||421){
         removeToken()
         router.push('/login')
        return Promise.reject(res);
    }
    
    if(res.code === 418){
            const config = response.config
      if (!isRefreshing) {
        isRefreshing = true
       
          
        
        return refreshToken().then(res => {
    
          const { token ,refreshToken} = res.data
         
          
          instance.setToken(token,refreshToken)
          config.headers['Authorization'] = `Auth ${token}`
          config.baseURL = ''
          console.log('token过期刷新接口');
           //  这里有个小问题  当在重试中 如果接口报错 就会直接跳转到登录页  需要后端配合
          // 已经刷新了token，将所有队列中的请求进行重试
          
          requests.forEach(cb => cb(token))
          requests = []
          return instance(config)
        },err=>{
          console.log(err)
          
        }).catch(res => {

         
         
          console.error('refreshtoken error =>', res)
         
          
        }).finally(() => {
          console.log('这边');
          
          isRefreshing = false
        })
      }else {
        // 正在刷新token，将返回一个未执行resolve的promise
        // 保存函数 等待执行
        // 吧请求都保存起来 等刷新完成后再一个一个调用
        return new Promise((resolve) => {
          // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
          requests.push((token) => {
            config.baseURL = ''
            config.headers['Authorization'] = `Auth ${token}`
            resolve(instance(config))
          })
        })
        
      }
    
    }  

  
    
 

    
     if (res.code === 0) {
   //  所有失败拦截
      return Promise.reject(res);
      // return res
    }
    return res
  },
  error => {
     console.log(error);
  
    return Promise.reject();
  }
);

export { instance };

希望对大家有帮助！！