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

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

注意：如果一个账号允许多人登录使用，上述方法没有问题，但是如果一个账号只允许一人登录，一个地点登录，那上述方法就不那么全面，这时候可以采用使用响应拦截器，拦截状态码进行对应的异常处理，然后判断哪些是token失效，再进行对应的登出操作或者是重新获取token。

2.完整代码

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 ' + tokenconfig.params['access_token'] = token/*将请求挂起*/resolve(config)})})return retry}}else{router.push({ path: '/login' })}return config
}, error => {// Do something with request errorconsole.log("11111"+error) // for debugPromise.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失效 ,重新获取tokenvar 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 responsereturn 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

！！！自己记录，有好的建议或者不同看法欢迎提出。

vue 拦截器，增加token参数相关推荐

Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. 1. 在vueresource情况下设置t ...
vue ajax拦截器,Vue-resource拦截器判断token失效跳转详解
本文主要为大家带来一篇Vue-resource拦截器判断token失效跳转的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 在拦截器中设置全局的 ...
前端学习（2708）：重读vue电商网站28之通过axios请求拦截器添加 token
通过axios请求拦截器添加 token,保证拥有获取数据的权限. 原因是,后台那边除开登录的 api,其它都需要进行授权 . 因此,我们可以利用 axios 中interceptors属性,其中有一 ...
前端学习（2707）：重读vue电商网站27之通过axios请求拦截器添加 token
通过axios请求拦截器添加 token,保证拥有获取数据的权限. 原因是,后台那边除开登录的 api,其它都需要进行授权 . 因此,我们可以利用 axios 中interceptors属性,其中有一 ...
Vue 拦截器原理和详细使用
拦截器原理和作用首先拦截器在src/utils/request.js 文件中,拦截器分为请求拦截器和响应拦截器. 页面中的每一个请求都会经过请求拦截和响应拦截,所以一般在这个文件进行操作. 这一文件 ...
面试宝典三 --学科管理模块（拦截器，token，统一异常处理）
面试宝典需求分析涉及到的表,实体类,页面学科管理页面跳转新增学科分析前端统一设置拦截器后台登录拦截配置统一异常处理 RequestException: 前端新增学科后端逻辑 Cour ...
(十六)ATP应用测试平台——java应用中的过滤器Filter、拦截器Interceptor、参数解析器Resolver、Aop切面，你会了吗？
前言过滤器Filter.拦截器Interceptor.参数解析器Resolver.Aop切面是我们应用开发中经常使用到的技术,到底该如何使用这些web附属功能, 本小节我们就分别介绍一下其各自的用法 ...
拦截器HandlerInterceptor+方法参数解析器HandlerMethodArgumentResolver用于统一获取当前登录用户信息
文章目录前言一.拦截器+方法参数解析器是什么? 二.具体实现步骤 1.自定义权限拦截器LoginInterceptor拦截所有request请求,并将token解析为currentUser,最终 ...
.NET中间件以及VUE拦截器联合使用
.NET中间件以及VUE拦截器联合使用工作中遇见的问题,边学边弄,记录一下 Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑特性 //特性public class ModelEsi ...

vue 拦截器，增加token参数

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

2.完整代码

vue 拦截器，增加token参数相关推荐

最新文章

热门文章