token在計算機身份認證中是令牌（臨時）的意思，在詞法分析中是標記的意思。一般作為邀請、登入系統使用。
在vue專案中實現token替換
思路：
這裡使用的vue中的請求***，根據後端返回的token的生成時間，以及該token的有效期和當前傳送請求的時間進行計算，判斷當前token是否快要過期，以確定是否開始請求新的token。
計算公式為：token有效時間 -（當前時間 - token的生成時間）= 剩餘的token有效時間
這裡我的判斷為,token剩餘有效時間，小於五分鐘的時候，呼叫重新整理token的介面，請求最新的token。
在請求新token期間，可能同時會有好幾個請求同時發起，我們在這裡將這些請求攔截下來，通過promise，將這些請求，完整的放在待執行的請求佇列中，
當新的token請求成功，更新本地的token之後，開始執行攔截的請求佇列，並將這些請求的header中的token替換為最新的token，完成token整個流程。
如果請求新token介面失敗，並且原token已過了有效期時，提示登入過期，重定向到登入頁，重新登入！
請看**
import axios from
'axios'
// 引入axios
import loginapi from
'./api/article/loginapi'
import router from
'../router'
import qs from
'qs'
import
from
'element-ui'
console.
info
(location.hostname)
if(location.hostname ===
'localhost'
|| location.hostname ===
'127.0.0.1'
)else
/proxy`
}// eslint-disable-next-line no-unused-vars
/* 是否正在重新整理的標誌 */
window.isrefreshing =
false
// token是否過期，預設為否
window.tokenoverdue =
false
/* 儲存請求的陣列 */
const refreshsubscribers =
/* 將所有的請求都push到陣列中,其實陣列是[function(token){}, function(token){},...] */
function
subscribetokenrefresh
(cb)
/* 陣列中的請求得到新的token之後自執行，用新的token去請求資料 */
function
onrrefreshed
(token)
function
tokenisoverdue()
else
}tokenisoverdue()
/*** 請求失敗後的錯誤統一處理
* @param status 請求失敗的狀態碼
*/const
errorhandle
=(response)
=>
) message.
error
('請求的資源不在'
)break
// 伺服器錯誤
case
500:
message.
error
(msg)
break
default
: console.
log(msg)}}
// 建立axios例項
var instance = axios.
create()
/*** 請求***
* 每次請求前，如果存在token則在請求頭中攜帶token
*/instance.interceptors.request.
use(
request =>
else
/* 判斷token是否即將過期 */
/* `oauth/token`是重新整理token的介面，只有當token將要過期且不是請求重新整理token的介面才會進入 */if(
tokenisoverdue()
&&!request.url.
includes
('oauth/token'))
)).then
(res =>
else
else}}
)const retry =
newpromise
((resolve, reject)
=>)}
)return retry
}}else
}else
return request
},error =>
)// 響應***
instance.interceptors.response.
use(
// 請求成功
res =>
,// 請求失敗
error =>
= error
if(response)
else})
export
default instance
Vue專案中實現使用者登入及token驗證
在前後端完全分離的情況下，vue專案中實現token驗證大致思路如下 1 第一次登入的時候，前端調後端的登陸介面，傳送使用者名稱和密碼 2 後端收到請求，驗證使用者名稱和密碼，驗證成功，就給前端返回乙個token 3 前端拿到token，將token儲存到localstorage和vuex中，並跳轉...
vue專案中token的儲存和使用
一般來說，都會在登入時調取登入介面，並獲得token值，我們將他儲存在localstorage或者sessionstorage裡面。儲存token的方法 sessionstorage.setitem token response.data.token 獲取token的方法 sessionstorag...
在vue專案中, mock資料
1.在根目錄下建立 test 目錄,用來存放模擬的 json 資料,在 test 目錄下建立模擬的資料 data.json 檔案 2.在build目錄下的 dev server.js的檔案作如下更改 3.在.vue做請求,就可以成功獲取data.json的資料了,下面使用 axios 進行請求axi...