vue中對token有效期的深入理解

更新時間：2023年07月31日 09:18:42 作者：梔椩

本文主要介紹了vue中對token有效期的深入理解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

保持登錄是每個web頁面必須要做的，不能一直不停的讓用戶進行登錄，也不能讓用戶不登錄就直接進入頁面。token在保持登錄中起到了非常重要的作用，我之前寫過一篇博客，vue存儲和使用后端傳遞過來的token，這篇博客詳細的說明了后端如何向前端傳遞token，前端如何將token保存在localstorage中，并通過請求攔截的方式判斷token是否過期。我不確定這么寫是否真的能起到作用，因為我后面寫代碼的時候，我發(fā)現(xiàn)我后端明明設定的token的有效期是10個小時，而本地localstorage中還一直有這個token并沒有清除。于是想了個辦法，在路由守衛(wèi)這個環(huán)節(jié)設置token的有效期，并進行驗證。記錄一下。

前端新設置一個token的有效期

代碼寫在路由處理文件中（router/index.js）

// 路由守衛(wèi)
import jwt_decode from 'jwt-decode'
router.beforeEach((to, from, next) => {
? const EXPIRESTIME = 86400 ?
? const isLogin = localStorage.mytoken ? true : false;
? if (isLogin){
? ? const decode = jwt_decode(localStorage.mytoken)
? ? const date = parseInt(new Date().getTime() / 1000)
? ? if ((date - decode.iat) > EXPIRESTIME){
? ? ? localStorage.removeItem('mytoken')
? ? ? next("/login");
? ? }
? }
? if (to.path == "/login" || to.path == "/register") {
? ? next();
? } else {
? ? isLogin ? next() : next("/login");
? }
});

上面的代碼可以看出，我設定了一個有效期EXPIRESTIME = 86400，也就是246060一天的時間

如果本地存儲了token的話，我就對這個token進行解碼，獲得這個token的創(chuàng)建時間iat，并與當前時間new Date().getTime()進行比較，注意這里有個坑，當前時間是int型數(shù)據，單位是毫秒，而iat雖然也是int型數(shù)據，但單位是秒，所以我把當前時間除以1000再比較

如果超過了這個有效期，就清除這個token，然后重定向至登錄頁面

后面的路由守衛(wèi)比較簡單，就是正常的放行規(guī)則了

仍然使用后端token的有效期

我想來想去，還是覺得上面的思路有點不正常

既然后端已經設置了有效期，為啥前端還要這么操作呢，可能自己對全棧的理解還是不到位，我又重新看了一下自己大半個月前寫的那篇博客，我覺得這個做法應該是科學可行的，還是把代碼上上來

import axios from "axios";
import { Message, Loading } from 'element-ui';
import router from "./router"
let loading;
function startLoading(){
? ? loading = Loading.service({
? ? ? ? lock: true,
? ? ? ? text: '數(shù)據加載中',
? ? ? ? background: 'rgba(0,0,0,0.7)'
? ? })
}
function endLoading(){
? ? loading.close();
}
// 請求攔截
axios.interceptors.request.use(config => {
? ? startLoading();
? ? if(localStorage.eleToken){
? ? ? ? // 設置統(tǒng)一的請求頭
? ? ? ? config.headers.Authorization = localStorage.eleToken
? ? }
? ? return config
}, error => {
? ? return Promise.reject(error)
})
//響應攔截
axios.interceptors.response.use(response => {
? ? endLoading();
? ? return response
}, error => {
? ? // 錯誤提醒
? ? endLoading();
? ? Message.error(error.response.data)
? ? // 獲取錯誤狀態(tài)碼
? ? const {status} = error.response
? ? if(status == 401){
? ? ? ? Message.error("token失效，請重新登錄")
? ? ? ? localStorage.removeItem('eleToken')
? ? ? ? router.push('/login')
? ? }
? ? return Promise.reject(error)
})
export default axios

這個代碼相當于是對axios進行了二次封裝，有很重要的兩點：