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-10Nuxt3項目搭建過程(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-12vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么
這篇文章主要介紹了vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08