vue拦截器如何增加token参数

目录

• vue拦截器增加token参数
• 使用请求拦截器，拦截vue所有请求，增加token参数
• 注意
• 完整代码
• 总结

import axios from 'axios'
import { getToken } from '@/utils/auth'
import { getToken_refresh } from '@/api/users'
import router from '../router/index';
 
// 创建axios实例
const service = axios.create({
  baseURL: 'http://122.152.250.75:10101', // api的base_url
  // baseURL: 'http://127.0.0.1:8081/auth',
  timeout: 10000 // 请求超时时间
})
 
/*是否有请求正在刷新token*/
window.isRefreshing = false
/*被挂起的请求数组*/
let refreshSubscribers = []
 
/*获取刷新token请求的token*/
function getRefreshToken () {
  return localStorage.getItem("refresh_token")
}
 
/*push所有请求到数组中*/
function subscribeTokenRefresh (cb) {
  refreshSubscribers.push(cb)
}
 
/*刷新请求（refreshSubscribers数组中的请求得到新的token之后会自执行，用新的token去请求数据）*/
function onRrefreshed (token) {
  refreshSubscribers.map(cb => cb(token))
}
 
// request 请求拦截器
service.interceptors.request.use(config => {
  if (getToken()) {
    config.params['access_token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    /*判断token是否将要过期*/
    var istoken = isTokenExpired();
    if (istoken) {
      /*判断是否正在刷新*/
      if (!window.isRefreshing) {
        /*将刷新token的标志置为true*/
        window.isRefreshing = true
        /*发起刷新token的请求*/
        var params = {
          refresh_token: localStorage.getItem('refresh_Token'),
        };
        getToken_refresh(params).then((res) => {
          /*将标志置为false*/
          window.isRefreshing = false
          /*成功刷新token*/
          // config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token
          /*更新auth*/
          if(res.data.code == 0){
            alert("登录超时，请重新登录");
            router.push({ path: '/login' })
            return
          }
          localStorage.setItem('Token',res.data.data.access_token);
          localStorage.setItem('refresh_Token',res.data.data.refresh_token);
          localStorage.setItem("expired_at",res.data.data.expired_at);
          config.params['access_token'] = getToken()
          /*执行数组里的函数,重新发起被挂起的请求*/
          onRrefreshed(res.data.data.access_token)
          /*执行onRefreshed函数后清空数组中保存的请求*/
          refreshSubscribers = []
        }).catch(err => {
          alert(err.response.data.message)
          /*清除本地保存的auth*/
          // localStorage.removeItem('auth')
          window.location.href = '#/login'
        })
      }
      /*把请求(token)=>{....}都push到一个数组中*/
      let retry = new Promise((resolve, reject) => {
        /*(token) => {...}这个函数就是回调函数*/
        subscribeTokenRefresh((token) => {
          // config.headers.Authorization = 'Bearer ' + token
          config.params['access_token'] = token
          /*将请求挂起*/
          resolve(config)
        })
      })
      return retry
    }
  }else{
    router.push({ path: '/login' })
  }
  return config
}, error => {
  // Do something with request error
  console.log("11111"+error) // for debug
  Promise.reject(error)
})
 
// response 响应拦截器
service.interceptors.response.use(
  response => {
    // console.log(response)
    if (response.status !== 200) {
      if(response.status === 500) { // 服务器断开
        this.$message({
          showClose: true,
          message: '服务器断开，请稍后重试。',
          type: 'error'
        });
      }
      return Promise.reject(new Error(response.message || 'Error'))
    } else {
      return response
    }
  },error => {
    // console.log("cesc"+error)
    if (error.response.status === 401) { // token失效 ,重新获取token
        var params = {
          refresh_token: localStorage.getItem('refresh_Token'),
        };
        getToken_refresh(params).then((res) => {
          /*更新auth*/
          if(res.data.code == 0){
            alert("登录超时，请重新登录");
            router.push({ path: '/login' })
            return
          }
          localStorage.setItem('Token',res.data.data.access_token);
          localStorage.setItem('refresh_Token',res.data.data.refresh_token);
          localStorage.setItem("expired_at",res.data.data.expired_at);
        }).catch(err => {
          alert(err.response.data.message)
          /*清除本地保存的auth*/
          // localStorage.removeItem('auth')
          window.location.href = '#/login'
        })
      }else if(error.response.status === 500) { // 服务器断开
      alert("服务器断开，请稍后重试。");
    }else if(error.response.status === 403){ //无auth授权，后台不允许访问
      alert("不允许访问,请与技术人员联系");
    }
      return response
    return Promise.reject(error)
  }
)
/*判断token是否过期*/
function isTokenExpired() {
  let expiredTime =  new Date().getTime() / 1000;
  /*从localStorage中取出token过期时间*/
  if(localStorage.getItem("expired_at") != undefined && localStorage.getItem("expired_at") != "undefined"){
    expiredTime = new Date(localStorage.getItem("expired_at")).getTime() / 1000
  }
  /*获取本地时间*/
  let nowTime = new Date().getTime() / 1000
 
  /*如果 < 10分钟，则说明即将过期*/
  var flag = (expiredTime - nowTime) < 10*60;
  // return (expiredTime - nowTime) < 10*60;
  return flag;
}
export default service