前端登錄退出處理Token問(wèn)題(獲取、緩存、失效處理)及代碼實(shí)現(xiàn)方法
一、什么是Token
Token是服務(wù)端生成的一串字符串,當(dāng)用戶第一次登陸成功后,服務(wù)器會(huì)生成一個(gè)token,并將其返回給客戶端。
當(dāng)用戶再次向服務(wù)器請(qǐng)求數(shù)據(jù)時(shí),只需要攜帶著token請(qǐng)求數(shù)據(jù)即可,無(wú)需再次登陸用戶名和密碼
目的
通過(guò)token做一層數(shù)據(jù)攔截,可以減少數(shù)據(jù)庫(kù)請(qǐng)求次數(shù),減緩服務(wù)器壓力
二、獲取token
當(dāng)用戶第一次登陸成功之后,后臺(tái)會(huì)返回一個(gè)token給到客戶端,前端將token緩存到本地,然后每次發(fā)請(qǐng)求時(shí)需要在 header 里邊帶上 token,這個(gè)時(shí)候本地的 token 和后臺(tái)數(shù)據(jù)庫(kù)中的 token 進(jìn)行一個(gè)驗(yàn)證,如果兩者一致,則請(qǐng)求成功,否則失敗。

三、Token失效處理
既然前后端通過(guò)token交互,如果一直有效,會(huì)有安全風(fēng)險(xiǎn),所以我們需要在客戶端進(jìn)行一下token的時(shí)間檢查
服務(wù)器的token一般不會(huì)設(shè)置太長(zhǎng),根據(jù)實(shí)際一般是1-7天,沒(méi)有一個(gè)token是永久的,永久的token就相當(dāng)于一串永久的密鑰,是不安全的。
token失效一般用兩種情形:
① 主動(dòng)退出:用戶點(diǎn)擊退出登錄按鈕后退出
② 被動(dòng)退出:token過(guò)期,或被人“頂號(hào)”退出
注意點(diǎn)
無(wú)論什么方式退出token,在用戶退出時(shí),所需要執(zhí)行的操作都是固定的
1、清理掉當(dāng)前用戶的緩存數(shù)據(jù)
2、清理掉相關(guān)權(quán)限的配置
3、返回到登錄頁(yè)面
1、主動(dòng)退出
用戶主動(dòng)點(diǎn)擊退出功能實(shí)現(xiàn)
user.js
// 獲取退出登錄
logout(context) {
context.commit("removeToken"); // 刪除token
context.commit("reomveUserInfo"); // 刪除用戶信息
},
2、Token過(guò)期
① 邏輯圖

②方案
在用戶登錄時(shí),記錄當(dāng)前的登錄時(shí)間
制定一個(gè)token時(shí)效時(shí)長(zhǎng)
在接口調(diào)用時(shí),根據(jù)當(dāng)前時(shí)間對(duì)比登錄時(shí)間,看是否超過(guò)了時(shí)效時(shí)間
如果未超過(guò),則正常進(jìn)行后續(xù)操作,如果超過(guò),則進(jìn)行退出登錄操作
③代碼實(shí)現(xiàn)
user.js
// 獲取登錄信息
async login(context, data) {
const result = await loginInfo(data);
context.commit("setToken", result);
setTimeStamp(); // 寫(xiě)入時(shí)間戳
},
auth.js
import Cookies from "js-cookie";
const timeKey = 'liqi6limi-timestamp-key' // 設(shè)置一個(gè)獨(dú)一無(wú)二的key
// 獲取時(shí)間戳
export function getTimeStamp() {
return Cookies.get(timeKey)
}
// 設(shè)置時(shí)間戳
export function setTimeStamp() {
Cookies.set(timeKey, Date.now())
}
// 設(shè)置超時(shí)時(shí)間
export const TimeOut = 3600;
// 是否超時(shí)
export function IsCheckTimeOut() {
var currentTime = Date.now(); // 當(dāng)前時(shí)間戳
var timeStamp = getTimeStamp(); // 緩存時(shí)間戳
return (currentTime - timeStamp) / 1000 > TimeOut;
}
request.js
import store from "@/store";
import axios from "axios";
import { getTimeStamp,IsCheckTimeOut } from "@/utils/auth";
import router from "@/router";
// 創(chuàng)建axios實(shí)例
const service = axios.create({
baseURL: "/api",
timeout: 5000,
});
// 請(qǐng)求攔截器
service.interceptors.request.use(
(config) => {
// 是否存在token
if (store.getters.token) {
if (IsCheckTimeOut()) {
store.dispatch("user/logout"); // 退出登錄的action
router.push("/login"); // 跳轉(zhuǎn)到登錄頁(yè)
return Promise.reject(new Error("token超時(shí)了")); // 拋出的錯(cuò)誤,會(huì)在響應(yīng)攔截器的錯(cuò)誤捕捉中捕捉到
console.log("超時(shí)");
}
config.headers["Authorization"] = `Bearer ${store.getters.token}`; // 如果token存在 注入token
}
return config; // 必須返回配置
},
(error) => {
return Promise.reject(error);
}
);
3、被人頂號(hào)
① 邏輯圖

② 方案
后端返回?cái)?shù)據(jù)時(shí),會(huì)返回特定的狀態(tài)碼通知前端
當(dāng)前端接收到特定狀態(tài)碼時(shí),表示遇到了特定狀態(tài):此時(shí)進(jìn)行退出登錄處理
③代碼實(shí)現(xiàn)
// 響應(yīng)攔截器
service.interceptors.response.use(
(response) => {
// axios默認(rèn)加了一層data
const { success, message, data } = response.data;
// 要根據(jù)success的成功與否決定下面的操作
if (success) {
return data;
} else {
// 業(yè)務(wù)已經(jīng)錯(cuò)誤了
Message.error(message); // 提示錯(cuò)誤消息
return Promise.reject(new Error(message));
}
},
(error) => {
// error 信息 里面 response的對(duì)象
if (
error.response &&
error.response.data &&
error.response.data.code === 10002
) {
// 當(dāng)?shù)扔?0002的時(shí)候 表示 后端告訴我token超時(shí)了
store.dispatch("user/logout"); // 登出action 刪除token
router.push("/login");
} else {
Message.error(error.message); // 提示錯(cuò)誤信息
}
return Promise.reject(error);
}
);總結(jié)
到此這篇關(guān)于前端登錄退出處理Token問(wèn)題(獲取、緩存、失效處理)及代碼實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)前端登錄退出處理Token問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3中watch無(wú)法監(jiān)聽(tīng)的解決辦法
本文主要介紹了Vue3中watch無(wú)法監(jiān)聽(tīng)的解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue使用Multiavatarjs生成自定義隨機(jī)頭像的案例
這篇文章給大家介紹了Vue項(xiàng)目中使用Multiavatarjs生成自定義隨機(jī)頭像的案例,文中通過(guò)代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
Vue3 axios配置以及cookie的使用方法實(shí)例演示
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下2023-02-02
Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
本文主要介紹了Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
完美解決通過(guò)IP地址訪問(wèn)VUE項(xiàng)目的問(wèn)題
這篇文章主要介紹了完美解決通過(guò)IP地址訪問(wèn)VUE項(xiàng)目的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07

