當多個異步請求同時發出并且需要校驗身份的時候,通常會遇到token過期的情況。這時候我們可以采用并發請求校驗token,如果token過期則立即跳轉到登錄頁進行重新登錄的方式來解決問題。
在Vue項目中,我們可以通過axios插件來實現異步請求,并發請求校驗token的功能。首先,我們需要安裝axios插件:
npm install axios
安裝完成后,在Vue項目的main.js中引入axios:
import axios from 'axios'
Vue.prototype.$axios = axios
接下來,在異步請求的攔截器中進行token的校驗。攔截器允許我們在發送請求和處理響應之前對它們進行更改或者擴展。在這里,我們可以在請求頭中添加Authorization字段,然后在服務器端進行token的驗證和校驗。如果校驗失敗,則立即跳轉到登錄頁;如果校驗成功,則繼續進行異步請求。下面是攔截器的代碼:
import router from './router'
//請求攔截器
axios.interceptors.request.use(function (config) {
// 在發送請求之前做些什么
if (localStorage.token) {
config.headers.Authorization = localStorage.token;
}
return config;
}, function (error) {
// 對請求錯誤做些什么
console.log(error);
});
//響應攔截器
axios.interceptors.response.use(function (response) {
// 對響應數據做點什么
return response;
}, function (error) {
// 如果響應里的狀態碼是401,則說明token過期或者無效,需要重新登錄
if (error.response.status === 401) {
router.push('/login');
}
return Promise.reject(error);
});
以上代碼中,請求攔截器中添加了Authorization字段,響應攔截器中如果響應狀態碼是401,則立即跳轉到登錄頁。需要注意的是,如果某個接口特殊處理,不需要進行token校驗,則需要在該接口中刪除Authorization字段。其它接口則可以正常請求。
最后,需要提醒的是,如果在異步請求中使用了async/await語法,可能會對并發請求校驗token造成影響。因為async/await語法在執行異步請求時是串行執行的,而不是并行執行的。為了避免這種情況,我們應該把多個異步請求放在Promise.all中進行并發請求。
let [res1, res2] = await Promise.all([this.getXXX(), this.postXXX()]);
以上代碼中,getXXX和postXXX都是異步請求,通過Promise.all進行并發請求,效率會更高。如果要進行并發請求校驗token,也可以使用同樣的方式。