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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
来源:https://www.jb51.net/javascript/326740wou.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]