vue拦截器如何增加token参数

 更新时间:2024年08月30日 15:46:19   作者:石意  
这篇文章主要介绍了vue拦截器如何增加token参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Nuxt如何实现将服务测数据存储到Vuex中

    Nuxt如何实现将服务测数据存储到Vuex中

    这篇文章主要介绍了Nuxt如何实现将服务测数据存储到Vuex中的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解mpvue开发小程序小总结

    详解mpvue开发小程序小总结

    这篇文章主要介绍了详解mpvue开发小程序小总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue路由传参及获取参数的方式总结

    vue路由传参及获取参数的方式总结

    这篇文章主要介绍了vue路由传参及获取参数的方式总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue3+vite:src使用require动态导入图片报错的最新解决方法

    vue3+vite:src使用require动态导入图片报错的最新解决方法

    这篇文章主要介绍了vue3+vite:src使用require动态导入图片报错和解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue实现简单计算商品价格

    vue实现简单计算商品价格

    这篇文章主要为大家详细介绍了vue实现简单计算商品价格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • Ant Design Vue 修改表格头部样式的详细代码

    Ant Design Vue 修改表格头部样式的详细代码

    这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API,类型是一个函数,本文通过完整代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • Vue中的路由导航守卫导航解析流程

    Vue中的路由导航守卫导航解析流程

    这篇文章主要介绍了Vue中的路由导航守卫导航解析流程,正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的
    2023-04-04
  • 如何让别人访问本地运行的vue项目

    如何让别人访问本地运行的vue项目

    这篇文章主要介绍了如何让别人访问本地运行的vue项目,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue数字金额动态变化功能实现方法详解

    vue数字金额动态变化功能实现方法详解

    这篇文章主要介绍了vue实现数字金额动态变化效果,数字动态变化是我们在前端开发中经常需要做的效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • 项目中Axios二次封装实例Demo

    项目中Axios二次封装实例Demo

    vue项目经常会用到axios来请求数据,那么首先肯定需要对这个请求方法进行一个二次封装,这篇文章主要给大家介绍了关于项目中Axios二次封装的相关资料,需要的朋友可以参考下
    2021-06-06

最新评论