前端登錄退出處理Token問題(獲取、緩存、失效處理)及代碼實現(xiàn)方法
一、什么是Token
Token是服務(wù)端生成的一串字符串,當用戶第一次登陸成功后,服務(wù)器會生成一個token,并將其返回給客戶端。
當用戶再次向服務(wù)器請求數(shù)據(jù)時,只需要攜帶著token請求數(shù)據(jù)即可,無需再次登陸用戶名和密碼
目的
通過token做一層數(shù)據(jù)攔截,可以減少數(shù)據(jù)庫請求次數(shù),減緩服務(wù)器壓力
二、獲取token
當用戶第一次登陸成功之后,后臺會返回一個token給到客戶端,前端將token緩存到本地,然后每次發(fā)請求時需要在 header 里邊帶上 token,這個時候本地的 token 和后臺數(shù)據(jù)庫中的 token 進行一個驗證,如果兩者一致,則請求成功,否則失敗。
三、Token失效處理
既然前后端通過token交互,如果一直有效,會有安全風(fēng)險,所以我們需要在客戶端進行一下token的時間檢查
服務(wù)器的token一般不會設(shè)置太長,根據(jù)實際一般是1-7天,沒有一個token是永久的,永久的token就相當于一串永久的密鑰,是不安全的。
token失效一般用兩種情形:
① 主動退出:用戶點擊退出登錄按鈕后退出
② 被動退出:token過期,或被人“頂號”退出
注意點
無論什么方式退出token,在用戶退出時,所需要執(zhí)行的操作都是固定的
1、清理掉當前用戶的緩存數(shù)據(jù)
2、清理掉相關(guān)權(quán)限的配置
3、返回到登錄頁面
1、主動退出
用戶主動點擊退出功能實現(xiàn)
user.js
// 獲取退出登錄 logout(context) { context.commit("removeToken"); // 刪除token context.commit("reomveUserInfo"); // 刪除用戶信息 },
2、Token過期
① 邏輯圖
②方案
在用戶登錄時,記錄當前的登錄時間
制定一個token時效時長
在接口調(diào)用時,根據(jù)當前時間對比登錄時間,看是否超過了時效時間
如果未超過,則正常進行后續(xù)操作,如果超過,則進行退出登錄操作
③代碼實現(xiàn)
user.js
// 獲取登錄信息 async login(context, data) { const result = await loginInfo(data); context.commit("setToken", result); setTimeStamp(); // 寫入時間戳 },
auth.js
import Cookies from "js-cookie"; const timeKey = 'liqi6limi-timestamp-key' // 設(shè)置一個獨一無二的key // 獲取時間戳 export function getTimeStamp() { return Cookies.get(timeKey) } // 設(shè)置時間戳 export function setTimeStamp() { Cookies.set(timeKey, Date.now()) } // 設(shè)置超時時間 export const TimeOut = 3600; // 是否超時 export function IsCheckTimeOut() { var currentTime = Date.now(); // 當前時間戳 var timeStamp = getTimeStamp(); // 緩存時間戳 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實例 const service = axios.create({ baseURL: "/api", timeout: 5000, }); // 請求攔截器 service.interceptors.request.use( (config) => { // 是否存在token if (store.getters.token) { if (IsCheckTimeOut()) { store.dispatch("user/logout"); // 退出登錄的action router.push("/login"); // 跳轉(zhuǎn)到登錄頁 return Promise.reject(new Error("token超時了")); // 拋出的錯誤,會在響應(yīng)攔截器的錯誤捕捉中捕捉到 console.log("超時"); } config.headers["Authorization"] = `Bearer ${store.getters.token}`; // 如果token存在 注入token } return config; // 必須返回配置 }, (error) => { return Promise.reject(error); } );
3、被人頂號
① 邏輯圖
② 方案
后端返回數(shù)據(jù)時,會返回特定的狀態(tài)碼通知前端
當前端接收到特定狀態(tài)碼時,表示遇到了特定狀態(tài):此時進行退出登錄處理
③代碼實現(xiàn)
// 響應(yīng)攔截器 service.interceptors.response.use( (response) => { // axios默認加了一層data const { success, message, data } = response.data; // 要根據(jù)success的成功與否決定下面的操作 if (success) { return data; } else { // 業(yè)務(wù)已經(jīng)錯誤了 Message.error(message); // 提示錯誤消息 return Promise.reject(new Error(message)); } }, (error) => { // error 信息 里面 response的對象 if ( error.response && error.response.data && error.response.data.code === 10002 ) { // 當?shù)扔?0002的時候 表示 后端告訴我token超時了 store.dispatch("user/logout"); // 登出action 刪除token router.push("/login"); } else { Message.error(error.message); // 提示錯誤信息 } return Promise.reject(error); } );
總結(jié)
到此這篇關(guān)于前端登錄退出處理Token問題(獲取、緩存、失效處理)及代碼實現(xiàn)方法的文章就介紹到這了,更多相關(guān)前端登錄退出處理Token問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue使用Multiavatarjs生成自定義隨機頭像的案例
這篇文章給大家介紹了Vue項目中使用Multiavatarjs生成自定義隨機頭像的案例,文中通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2023-10-10Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐
本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11