最近在項(xiàng)目開發(fā)中，遇到下面這樣一個(gè)問題：
在進(jìn)行數(shù)據(jù)請(qǐng)求之前，每個(gè)請(qǐng)求需要攜帶token, 但是token 有有效期，token 失效后需要換取新的token并繼續(xù)請(qǐng)求。
需求分析
每個(gè)請(qǐng)求都需要攜帶 token ，所以我們可以使用 axios request 攔截器，在這里，我們給每個(gè)請(qǐng)求都加 token,這樣就可以節(jié)省每個(gè)請(qǐng)求再一次次的復(fù)制粘貼代碼。
token 失效問題，當(dāng)我們token 失效，我們服務(wù)端會(huì)返回一個(gè)特定的錯(cuò)誤表示，比如 token invalid，但是我們不能在每個(gè)請(qǐng)求之后去做刷新 token 的操作呀，所以這里我們就用 axios response 攔截器，我們統(tǒng)一處理所有請(qǐng)求成功之后響應(yīng)過來的數(shù)據(jù)，然后對(duì)特殊數(shù)據(jù)進(jìn)行處理，其他的正常分發(fā)
功能實(shí)現(xiàn)
分析完問題后，我們來實(shí)現(xiàn)功能
安裝axios, 這里我們就不再贅述怎么安裝axios.
在 main.js 注冊(cè) axios
在 request 攔截器實(shí)現(xiàn)
axios.interceptors.request.use(
config => {
config.baseURL = '/api/'
config.withCredentials = true // 允許攜帶token ,這個(gè)是解決跨域產(chǎn)生的相關(guān)問題
config.timeout = 2500
let token = sessionStorage.getItem('access_token')
let csrf = store.getters.csrf
if (token) {
config.headers = {
'access-token': token,
'Content-Type': 'application/x-www-form-urlencoded'
}
}
if (config.url === 'refresh') {
config.headers = {
'refresh-token': sessionStorage.getItem('refresh_token'),
'Content-Type': 'application/x-www-form-urlencoded'
}
}
return config
},
error => {
return Promise.reject(error)
}
)在 response 攔截器實(shí)現(xiàn)
axios.interceptors.response.use(
response => {
// 定時(shí)刷新access-token
if (!response.data.value && response.data.data.message === 'token invalid') {
// 刷新token
store.dispatch('refresh').then(response => {
sessionStorage.setItem('access_token', response.data)
}).catch(error => {
throw new Error('token刷新' + error)
})
}
return response
},
error => {
return Promise.reject(error)
}
)1、請(qǐng)求攔截器
請(qǐng)求攔截器的作用是在請(qǐng)求發(fā)送前進(jìn)行一些操作，例如在每個(gè)請(qǐng)求體里加上token，統(tǒng)一做了處理如果以后要改也非常容易。
axios.interceptors.request.use(function (config) {
// 在發(fā)送請(qǐng)求之前做些什么，例如加入token
.......
return config;
}, function (error) {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});2、響應(yīng)攔截器
響應(yīng)攔截器的作用是在接收到響應(yīng)后進(jìn)行一些操作，例如在服務(wù)器返回登錄狀態(tài)失效，需要重新登錄的時(shí)候，跳轉(zhuǎn)到登錄頁(yè)。
axios.interceptors.response.use(function (response) {
// 在接收響應(yīng)做些什么，例如跳轉(zhuǎn)到登錄頁(yè)
......
return response;
}, function (error) {
// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
return Promise.reject(error);
});3、移除攔截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);