vue拦截器如何增加token参数_Javascript

vue拦截器增加token参数

使用请求拦截器，拦截vue所有请求，增加token参数

使用倒数计时，假如token有效期60分钟，会在59分钟的时候去重新拿着refresh_token，去请求新的token.

注意

如果一个账号允许多人登录使用，上述方法没有问题

但是如果一个账号只允许一人登录，一个地点登录，那上述方法就不那么全面

这时候可以采用使用响应拦截器，拦截状态码进行对应的异常处理

然后判断哪些是token失效，再进行对应的登出操作或者是重新获取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