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)允許多人登錄使用,上述方法沒有問題
但是如果一個(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是否將要過期*/
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){ //無auth授權(quán),后臺(tái)不允許訪問
alert("不允許訪問,請(qǐng)與技術(shù)人員聯(lián)系");
}
return response
return Promise.reject(error)
}
)
/*判斷token是否過期*/
function isTokenExpired() {
let expiredTime = new Date().getTime() / 1000;
/*從localStorage中取出token過期時(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分鐘,則說明即將過期*/
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)文章
vuex實(shí)現(xiàn)簡易計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)一個(gè)簡易計(jì)數(shù)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼
這篇文章主要介紹了VUE+Element UI實(shí)現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
Nuxt3項(xiàng)目搭建過程(Nuxt3+element-plus+scss詳細(xì)步驟)
這篇文章主要介紹了Nuxt3項(xiàng)目搭建(Nuxt3+element-plus+scss詳細(xì)步驟),本次記錄一次使用Nuxt3搭建前端項(xiàng)目的過程,內(nèi)容包含Nuxt3的安裝,基于Vite腳手架(默認(rèn))構(gòu)建的vue3項(xiàng)目,element-plus的安裝配置,scss的安裝,目錄結(jié)構(gòu)的創(chuàng)建和解釋,需要的朋友可以參考下2022-12-12
vite項(xiàng)目的根目錄中的env.d.ts類型聲明文件里要寫什么
這篇文章主要介紹了vite項(xiàng)目的根目錄中的env.d.ts類型聲明文件里要寫什么,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08

