Token过期导致页面多个请求报错提示多次
2024-10-21 06:45:56
关于Token过期导致页面多个请求报错提示的问题
我们先在全局定义一个变量（global.js）来控制token是否过期
export default {
// token无效标记
TokenInvalidFlag:false
}
在路由拦截器里引入变量来判断是否过期进行判断
//request.js
import axios from 'axios'
import { Message } from 'element-ui'
import store from '../store'
import route from '../router'
import global from '@/utils/const/global'
// create an axios instance
const service = axios.create({
baseURL: '/', // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 1000 * 60 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
const token = `${store.state.user.token}`
if (token) config.headers['Authorization'] = `Bearer ${token}`
config.headers['sn-common'] = `version=v2&app=20200902&channel=web_admin`
store.commit('handleLoading',true);
// get参数编码
if (config.method === 'get' && config.params) {
let url = config.url
if (url.indexOf('?') === -1) {
url += '?'
} else {
url += '&'
}
const keys = Object.keys(config.params)
for (const key of keys) {
if (config.params[key] !== undefined && config.params[key] !== '') {
url += `${encodeURIComponent(key)}=${config.params[key]}&`
}
}
url = url.substring(0, url.length - 1)
config.params = {}
config.url = url
}
return config
},
error => {
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
if (response.data.code === -22) {
if(global.TokenInvalidFlag===false){
Message.error('登录态失效，请重新登录！');
global.TokenInvalidFlag = true;
store.dispatch('user/signOut').then(() => {
route.push({ name: 'login', params: {redirectFlag: true} })
})
}
} else if (response.status !== 200) {
Message.error(response.message || 'Error')
}else{
global.TokenInvalidFlag = false
}
// 如果是java服务
if(response.config.url.indexOf('/java/api') != -1) {
if (response.data.code != 0) {
Message.error(response.data.message || 'Error')
}
}
store.commit('handleLoading',false);
// Cannot read property 'data' of undefined
return response.data
},
error => {
if (error.response.status === 401) {
if(global.TokenInvalidFlag===false){
Message.error('登录态失效，请重新登录！')
store.dispatch('user/signOut').then(() => {
route.push({ name: 'login', params: {redirectFlag: true} })
});
global.TokenInvalidFlag = true;
}
} else {
Message({
message: error.response.data.error_message,
type: 'error',
duration: 5 * 1000
})
}
store.commit('handleLoading',false);
return Promise.reject(error)
}
)
export default service
最新文章
- SQLSERVER 数值 四舍五入取整 向上取整 向下取整
- MS SQLServer 操作XML语句的存储过程
- Ubuntu 12 修改环境变量
- mysqldump备份详解
- Careercup | Chapter 8
- Ip 地址
- poj 2186 Popular Cows【tarjan求scc个数&&缩点】【求一个图中可以到达其余所有任意点的点的个数】
- ACM题目推荐（刘汝佳书上出现的一些题目）[非原创]
- unity3d 学习笔记（两）
- 添加MySql Metat Database 信息
- Bash扩展顺序
- 【linux之进程管理，系统监控】
- scala的多种集合的使用(6)之映射Map的操作方法
- 【朝花夕拾】Android性能篇之（二）Java内存分配
- HTTP 常见的状态码
- HDFS副本放置策略
- Java高级教程
- [Python]多线程入门
- 【DB2】查看表空间对应的物理文件地址
- 题目1076：N的阶乘(大数乘法)