1.使用請求攔截器，攔截vue所有請求，增加token參數

????? 使用倒數計時，假如token有效期60分鐘，會在59分鐘的時候去重新拿著refresh_Token，去請求新的token.

?????注意：如果一個賬號允許多人登錄使用，上述方法沒有問題，但是如果一個賬號只允許一人登錄，一個地點登錄，那上述方法就不那么全面，這時候可以采用使用響應攔截器，攔截狀態(tài)碼進行對應的異常處理，然后判斷哪些是token失效，再進行對應的登出操作或者是重新獲取token。

2.完整代碼

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 /*被掛起的請求數組*/ let refreshSubscribers = []/*獲取刷新token請求的token*/ function getRefreshToken () {return localStorage.getItem("refresh_token") }/*push所有請求到數組中*/ function subscribeTokenRefresh (cb) {refreshSubscribers.push(cb) }/*刷新請求（refreshSubscribers數組中的請求得到新的token之后會自執(zhí)行，用新的token去請求數據）*/ function onRrefreshed (token) {refreshSubscribers.map(cb => cb(token)) }// request 請求攔截器 service.interceptors.request.use(config => {if (getToken()) {config.params['access_token'] = getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改/*判斷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í)行數組里的函數,重新發(fā)起被掛起的請求*/onRrefreshed(res.data.data.access_token)/*執(zhí)行onRefreshed函數后清空數組中保存的請求*/refreshSubscribers = []}).catch(err => {alert(err.response.data.message)/*清除本地保存的auth*/// localStorage.removeItem('auth')window.location.href = '#/login'})}/*把請求(token)=>{....}都push到一個數組中*/let retry = new Promise((resolve, reject) => {/*(token) => {...}這個函數就是回調函數*/subscribeTokenRefresh((token) => {// config.headers.Authorization = 'Bearer ' + tokenconfig.params['access_token'] = token/*將請求掛起*/resolve(config)})})return retry}}else{router.push({ path: '/login' })}return config }, error => {// Do something with request errorconsole.log("11111"+error) // for debugPromise.reject(error) })// response 響應攔截器 service.interceptors.response.use(response => {// console.log(response)if (response.status !== 200) {if(response.status === 500) { // 服務器斷開this.$message({showClose: true,message: '服務器斷開，請稍后重試。',type: 'error'});}return Promise.reject(new Error(response.message || 'Error'))} else {return response}},error => {// console.log("cesc"+error)if (error.response.status === 401) { // token失效 ,重新獲取tokenvar 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) { // 服務器斷開alert("服務器斷開，請稍后重試。");}else if(error.response.status === 403){ //無auth授權，后臺不允許訪問alert("不允許訪問,請與技術人員聯(lián)系");}return responsereturn 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

?

總結

以上是生活随笔為你收集整理的工作总结6：token问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。