1.本文章讲述的是 VUE element admin UI中拦截器的作用 我们先来讲一下请求的原理
requert2.js 这里有小小的改动 把之前的requert.js替换成requert2.js因为请求的端口太多了
在requert2.js里引入import axios from 'axios' 然后定义请求格式
复制const instance = axios.create({ timeout: 20000, baseURL: process.env.VUE_APP_BASE_API, headers: { 'Content-Type': "application/json", } })
2.定义请求头拦截
instance .interceptors.request.use( config => { config.headers['Authorization'] = 'Bearer' + getToken() return config }, error => { return Promise.reject(error) } )
在请求头里面定义token是因为在请求之前想做什么，就是每次请求之前刷新token 这样才能做到token时刻更新时刻判断
getToken()是定义的对token存储在 auth.js的处理 如果用到token引入auth.js就好 Promise的作用请自行百度
请求头拦截除了做token刷新的作用 还可以做其他的作用具体看业务逻辑
2.请求头响应拦截
var ccc = function(instance) {
instance.interceptors.response.use(
response => {
return response
}, error => {
if (error.response.data.code == 401) {
MessageBox.confirm('您token已过期,请确认后请重新登录', ).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
} else if (error.response.data.code == 500) {
return error
} else {
return error
}
}
)
}
我这里是对请求响应做了一个封装 ，因为后端服务太多导致端口太多，这里响应成功和失败对应的是response，error 两种 可以做失败与成功相应的处理