快捷導(dǎo)航

vue中對(duì)token有效期的深入理解

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

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

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

前端新設(shè)置一個(gè)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");
? }
});

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

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

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

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

仍然使用后端token的有效期

我想來想去，還是覺得上面的思路有點(diǎn)不正常

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

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ù)據(jù)加載中',
? ? ? ? background: 'rgba(0,0,0,0.7)'
? ? })
}
function endLoading(){
? ? loading.close();
}
// 請(qǐng)求攔截
axios.interceptors.request.use(config => {
? ? startLoading();
? ? if(localStorage.eleToken){
? ? ? ? // 設(shè)置統(tǒng)一的請(qǐng)求頭
? ? ? ? config.headers.Authorization = localStorage.eleToken
? ? }
? ? return config
}, error => {
? ? return Promise.reject(error)
})
//響應(yīng)攔截
axios.interceptors.response.use(response => {
? ? endLoading();
? ? return response
}, error => {
? ? // 錯(cuò)誤提醒
? ? endLoading();
? ? Message.error(error.response.data)
? ? // 獲取錯(cuò)誤狀態(tài)碼
? ? const {status} = error.response
? ? if(status == 401){
? ? ? ? Message.error("token失效，請(qǐng)重新登錄")
? ? ? ? localStorage.removeItem('eleToken')
? ? ? ? router.push('/login')
? ? }
? ? return Promise.reject(error)
})
export default axios

這個(gè)代碼相當(dāng)于是對(duì)axios進(jìn)行了二次封裝，有很重要的兩點(diǎn)：