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 兩種 可以做失敗與成功相應的處理