vue攔截器如何增加token參數(shù)
vue攔截器增加token參數(shù)
使用請求攔截器,攔截vue所有請求,增加token參數(shù)
使用倒數(shù)計時,假如token有效期60分鐘,會在59分鐘的時候去重新拿著refresh_Token,去請求新的token.
注意
如果一個賬號允許多人登錄使用,上述方法沒有問題
但是如果一個賬號只允許一人登錄,一個地點登錄,那上述方法就不那么全面
這時候可以采用使用響應(yīng)攔截器,攔截狀態(tài)碼進行對應(yīng)的異常處理
然后判斷哪些是token失效,再進行對應(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實例
const service = axios.create({
baseURL: 'http://122.152.250.75:10101', // api的base_url
// baseURL: 'http://127.0.0.1:8081/auth',
timeout: 10000 // 請求超時時間
})
/*是否有請求正在刷新token*/
window.isRefreshing = false
/*被掛起的請求數(shù)組*/
let refreshSubscribers = []
/*獲取刷新token請求的token*/
function getRefreshToken () {
return localStorage.getItem("refresh_token")
}
/*push所有請求到數(shù)組中*/
function subscribeTokenRefresh (cb) {
refreshSubscribers.push(cb)
}
/*刷新請求(refreshSubscribers數(shù)組中的請求得到新的token之后會自執(zhí)行,用新的token去請求數(shù)據(jù))*/
function onRrefreshed (token) {
refreshSubscribers.map(cb => cb(token))
}
// request 請求攔截器
service.interceptors.request.use(config => {
if (getToken()) {
config.params['access_token'] = getToken() // 讓每個請求攜帶自定義token 請根據(jù)實際情況自行修改
/*判斷token是否將要過期*/
var istoken = isTokenExpired();
if (istoken) {
/*判斷是否正在刷新*/
if (!window.isRefreshing) {
/*將刷新token的標志置為true*/
window.isRefreshing = true
/*發(fā)起刷新token的請求*/
var params = {
refresh_token: localStorage.getItem('refresh_Token'),
};
getToken_refresh(params).then((res) => {
/*將標志置為false*/
window.isRefreshing = false
/*成功刷新token*/
// config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token
/*更新auth*/
if(res.data.code == 0){
alert("登錄超時,請重新登錄");
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ā)起被掛起的請求*/
onRrefreshed(res.data.data.access_token)
/*執(zhí)行onRefreshed函數(shù)后清空數(shù)組中保存的請求*/
refreshSubscribers = []
}).catch(err => {
alert(err.response.data.message)
/*清除本地保存的auth*/
// localStorage.removeItem('auth')
window.location.href = '#/login'
})
}
/*把請求(token)=>{....}都push到一個數(shù)組中*/
let retry = new Promise((resolve, reject) => {
/*(token) => {...}這個函數(shù)就是回調(diào)函數(shù)*/
subscribeTokenRefresh((token) => {
// config.headers.Authorization = 'Bearer ' + token
config.params['access_token'] = token
/*將請求掛起*/
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ù)器斷開,請稍后重試。',
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("登錄超時,請重新登錄");
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ù)器斷開,請稍后重試。");
}else if(error.response.status === 403){ //無auth授權(quán),后臺不允許訪問
alert("不允許訪問,請與技術(shù)人員聯(lián)系");
}
return response
return Promise.reject(error)
}
)
/*判斷token是否過期*/
function isTokenExpired() {
let expiredTime = new Date().getTime() / 1000;
/*從localStorage中取出token過期時間*/
if(localStorage.getItem("expired_at") != undefined && localStorage.getItem("expired_at") != "undefined"){
expiredTime = new Date(localStorage.getItem("expired_at")).getTime() / 1000
}
/*獲取本地時間*/
let nowTime = new Date().getTime() / 1000
/*如果 < 10分鐘,則說明即將過期*/
var flag = (expiredTime - nowTime) < 10*60;
// return (expiredTime - nowTime) < 10*60;
return flag;
}
export default service總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE+Element UI實現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼
這篇文章主要介紹了VUE+Element UI實現(xiàn)簡單的表格行內(nèi)編輯效果的示例的代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Nuxt3項目搭建過程(Nuxt3+element-plus+scss詳細步驟)
這篇文章主要介紹了Nuxt3項目搭建(Nuxt3+element-plus+scss詳細步驟),本次記錄一次使用Nuxt3搭建前端項目的過程,內(nèi)容包含Nuxt3的安裝,基于Vite腳手架(默認)構(gòu)建的vue3項目,element-plus的安裝配置,scss的安裝,目錄結(jié)構(gòu)的創(chuàng)建和解釋,需要的朋友可以參考下2022-12-12
vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么
這篇文章主要介紹了vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08

