vue攔截器如何增加token參數(shù)
vue攔截器增加token參數(shù)
使用請(qǐng)求攔截器,攔截vue所有請(qǐng)求,增加token參數(shù)
使用倒數(shù)計(jì)時(shí),假如token有效期60分鐘,會(huì)在59分鐘的時(shí)候去重新拿著refresh_Token,去請(qǐng)求新的token.
注意
如果一個(gè)賬號(hào)允許多人登錄使用,上述方法沒(méi)有問(wèn)題
但是如果一個(gè)賬號(hào)只允許一人登錄,一個(gè)地點(diǎn)登錄,那上述方法就不那么全面
這時(shí)候可以采用使用響應(yīng)攔截器,攔截狀態(tài)碼進(jìn)行對(duì)應(yīng)的異常處理
然后判斷哪些是token失效,再進(jìn)行對(duì)應(yīng)的登出操作或者是重新獲取token
完整代碼
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { getToken_refresh } from '@/api/users'
import router from '../router/index';
// 創(chuàng)建axios實(shí)例
const service = axios.create({
baseURL: 'http://122.152.250.75:10101', // api的base_url
// baseURL: 'http://127.0.0.1:8081/auth',
timeout: 10000 // 請(qǐng)求超時(shí)時(shí)間
})
/*是否有請(qǐng)求正在刷新token*/
window.isRefreshing = false
/*被掛起的請(qǐng)求數(shù)組*/
let refreshSubscribers = []
/*獲取刷新token請(qǐng)求的token*/
function getRefreshToken () {
return localStorage.getItem("refresh_token")
}
/*push所有請(qǐng)求到數(shù)組中*/
function subscribeTokenRefresh (cb) {
refreshSubscribers.push(cb)
}
/*刷新請(qǐng)求(refreshSubscribers數(shù)組中的請(qǐng)求得到新的token之后會(huì)自執(zhí)行,用新的token去請(qǐng)求數(shù)據(jù))*/
function onRrefreshed (token) {
refreshSubscribers.map(cb => cb(token))
}
// request 請(qǐng)求攔截器
service.interceptors.request.use(config => {
if (getToken()) {
config.params['access_token'] = getToken() // 讓每個(gè)請(qǐng)求攜帶自定義token 請(qǐng)根據(jù)實(shí)際情況自行修改
/*判斷token是否將要過(guò)期*/
var istoken = isTokenExpired();
if (istoken) {
/*判斷是否正在刷新*/
if (!window.isRefreshing) {
/*將刷新token的標(biāo)志置為true*/
window.isRefreshing = true
/*發(fā)起刷新token的請(qǐng)求*/
var params = {
refresh_token: localStorage.getItem('refresh_Token'),
};
getToken_refresh(params).then((res) => {
/*將標(biāo)志置為false*/
window.isRefreshing = false
/*成功刷新token*/
// config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token
/*更新auth*/
if(res.data.code == 0){
alert("登錄超時(shí),請(qǐng)重新登錄");
router.push({ path: '/login' })
return
}
localStorage.setItem('Token',res.data.data.access_token);
localStorage.setItem('refresh_Token',res.data.data.refresh_token);
localStorage.setItem("expired_at",res.data.data.expired_at);
config.params['access_token'] = getToken()
/*執(zhí)行數(shù)組里的函數(shù),重新發(fā)起被掛起的請(qǐng)求*/
onRrefreshed(res.data.data.access_token)
/*執(zhí)行onRefreshed函數(shù)后清空數(shù)組中保存的請(qǐng)求*/
refreshSubscribers = []
}).catch(err => {
alert(err.response.data.message)
/*清除本地保存的auth*/
// localStorage.removeItem('auth')
window.location.href = '#/login'
})
}
/*把請(qǐng)求(token)=>{....}都push到一個(gè)數(shù)組中*/
let retry = new Promise((resolve, reject) => {
/*(token) => {...}這個(gè)函數(shù)就是回調(diào)函數(shù)*/
subscribeTokenRefresh((token) => {
// config.headers.Authorization = 'Bearer ' + token
config.params['access_token'] = token
/*將請(qǐng)求掛起*/
resolve(config)
})
})
return retry
}
}else{
router.push({ path: '/login' })
}
return config
}, error => {
// Do something with request error
console.log("11111"+error) // for debug
Promise.reject(error)
})
// response 響應(yīng)攔截器
service.interceptors.response.use(
response => {
// console.log(response)
if (response.status !== 200) {
if(response.status === 500) { // 服務(wù)器斷開
this.$message({
showClose: true,
message: '服務(wù)器斷開,請(qǐng)稍后重試。',
type: 'error'
});
}
return Promise.reject(new Error(response.message || 'Error'))
} else {
return response
}
},error => {
// console.log("cesc"+error)
if (error.response.status === 401) { // token失效 ,重新獲取token
var params = {
refresh_token: localStorage.getItem('refresh_Token'),
};
getToken_refresh(params).then((res) => {
/*更新auth*/
if(res.data.code == 0){
alert("登錄超時(shí),請(qǐng)重新登錄");
router.push({ path: '/login' })
return
}
localStorage.setItem('Token',res.data.data.access_token);
localStorage.setItem('refresh_Token',res.data.data.refresh_token);
localStorage.setItem("expired_at",res.data.data.expired_at);
}).catch(err => {
alert(err.response.data.message)
/*清除本地保存的auth*/
// localStorage.removeItem('auth')
window.location.href = '#/login'
})
}else if(error.response.status === 500) { // 服務(wù)器斷開
alert("服務(wù)器斷開,請(qǐng)稍后重試。");
}else if(error.response.status === 403){ //無(wú)auth授權(quán),后臺(tái)不允許訪問(wèn)
alert("不允許訪問(wèn),請(qǐng)與技術(shù)人員聯(lián)系");
}
return response
return Promise.reject(error)
}
)
/*判斷token是否過(guò)期*/
function isTokenExpired() {
let expiredTime = new Date().getTime() / 1000;
/*從localStorage中取出token過(guò)期時(shí)間*/
if(localStorage.getItem("expired_at") != undefined && localStorage.getItem("expired_at") != "undefined"){
expiredTime = new Date(localStorage.getItem("expired_at")).getTime() / 1000
}
/*獲取本地時(shí)間*/
let nowTime = new Date().getTime() / 1000
/*如果 < 10分鐘,則說(shuō)明即將過(guò)期*/
var flag = (expiredTime - nowTime) < 10*60;
// return (expiredTime - nowTime) < 10*60;
return flag;
}
export default service總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Nuxt如何實(shí)現(xiàn)將服務(wù)測(cè)數(shù)據(jù)存儲(chǔ)到Vuex中
這篇文章主要介紹了Nuxt如何實(shí)現(xiàn)將服務(wù)測(cè)數(shù)據(jù)存儲(chǔ)到Vuex中的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)的最新解決方法
這篇文章主要介紹了vue3+vite:src使用require動(dòng)態(tài)導(dǎo)入圖片報(bào)錯(cuò)和解決方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單計(jì)算商品價(jià)格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個(gè)API,類型是一個(gè)函數(shù),本文通過(guò)完整代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-10-10
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名,vue-router 提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中:全局的,單個(gè)路由獨(dú)享的,或者組件級(jí)的2023-04-04
如何讓別人訪問(wèn)本地運(yùn)行的vue項(xiàng)目
這篇文章主要介紹了如何讓別人訪問(wèn)本地運(yùn)行的vue項(xiàng)目,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue數(shù)字金額動(dòng)態(tài)變化功能實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字金額動(dòng)態(tài)變化效果,數(shù)字動(dòng)態(tài)變化是我們?cè)谇岸碎_發(fā)中經(jīng)常需要做的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
項(xiàng)目中Axios二次封裝實(shí)例Demo
vue項(xiàng)目經(jīng)常會(huì)用到axios來(lái)請(qǐng)求數(shù)據(jù),那么首先肯定需要對(duì)這個(gè)請(qǐng)求方法進(jìn)行一個(gè)二次封裝,這篇文章主要給大家介紹了關(guān)于項(xiàng)目中Axios二次封裝的相關(guān)資料,需要的朋友可以參考下2021-06-06

