1.雙token的使用場(chǎng)景

眾所周知，Token作為用戶(hù)獲取受保護(hù)資源的憑證，必須設(shè)置一個(gè)過(guò)期時(shí)間，否則一次登錄便可永久使用，認(rèn)證功能就失去了意義。但是矛盾在于：過(guò)期時(shí)間設(shè)置得太長(zhǎng)，用戶(hù)數(shù)據(jù)的安全性將大打折扣；過(guò)期時(shí)間設(shè)置得太短，用戶(hù)就必須每隔一段時(shí)間重新登錄，以獲取新的憑證，這會(huì)極大挫傷用戶(hù)的積極性。

1.假如你正在訪(fǎng)問(wèn)某個(gè)平臺(tái)，沉浸式的使用了一小時(shí)后卻突然彈出一個(gè)token過(guò)期，重定向到了登錄頁(yè)…

2.假如你正在某網(wǎng)站里填寫(xiě)你的個(gè)人信息或者內(nèi)容繁多的表單選項(xiàng)，填到一半的時(shí)候token過(guò)期了…提示需要重新登錄，結(jié)果登錄回來(lái)之后又要重新填寫(xiě)表單信息…T~T

3.假如你正在激情的搶票、蹲卡點(diǎn)秒殺活動(dòng)！結(jié)果剛要搶購(gòu)卻因token過(guò)期被重定向到登錄頁(yè)…

是不是代入起來(lái)就已經(jīng)很頭疼了？那如何避免這種情況發(fā)生呢，接下來(lái)我們就引入今天的主角——無(wú)感刷新token

2.什么是token

在介紹雙token無(wú)感刷新之前，我們先簡(jiǎn)單介紹一下什么是token吧！

token是一種用戶(hù)標(biāo)識(shí)，表示用戶(hù)身份，類(lèi)似于我們的身份證件。Token 是在服務(wù)端產(chǎn)生的。如果前端使用用戶(hù)名/密碼向服務(wù)端請(qǐng)求認(rèn)證，服務(wù)端認(rèn)證成功，那么在服務(wù)端會(huì)返回 Token 給前端。前端可以在每次請(qǐng)求的時(shí)候帶上 Token 證明自己的合法地位。如果這個(gè) Token 在服務(wù)端持久化（比如存入數(shù)據(jù)庫(kù)），那它就是一個(gè)永久的身份令牌。

3.如何無(wú)感刷新token（圖文＋代碼）

當(dāng)token過(guò)期了之后，我們應(yīng)該如何做到讓用戶(hù)無(wú)感知的自動(dòng)刷新token呢？

目前比較常見(jiàn)的有三種方法：

• 寫(xiě)個(gè)定時(shí)器，時(shí)間一到就刷新getToken接口來(lái)獲取新token（極其不推薦）：消耗性能，不斷的去發(fā)送網(wǎng)絡(luò)請(qǐng)求，不建議這種做法
• 后端返回一個(gè)過(guò)期時(shí)間，前端每次發(fā)送請(qǐng)求都去判斷token是否過(guò)期，如果過(guò)期就調(diào)用getToken接口來(lái)獲取新token（不推薦）：需要后端額外提供一個(gè)過(guò)期時(shí)間的字段；使用了本地時(shí)間判斷，若本地時(shí)間被篡改，特別是本地時(shí)間比服務(wù)器時(shí)間慢時(shí)，攔截會(huì)失敗。
• 在請(qǐng)求響應(yīng)攔截器中攔截，判斷token 返回過(guò)期后，調(diào)用刷新token接口。（推薦???）：無(wú)性能損耗

在登錄成功后，后端會(huì)返回兩個(gè)Token，一個(gè)是Access Token(即短token)，一個(gè)是Refresh Token(即長(zhǎng)token)。前端需要將這兩個(gè)Token保存到本地存儲(chǔ)中，例如localStorage或sessionStorage中，以便在需要時(shí)使用。

當(dāng)需要訪(fǎng)問(wèn)API時(shí)，前端將從本地存儲(chǔ)中獲取Access Token，并將其放入請(qǐng)求頭中發(fā)送到后端。如果Access Token過(guò)期了，后端會(huì)返回一個(gè)錯(cuò)誤響應(yīng)，并提示前端進(jìn)行刷新Token的操作。

前端可以使用下面的代碼實(shí)現(xiàn)刷新Token的操作：

import axios from "axios";
import { getToken, setToken, setRefreshToken, getRefreshToken } from "./token";
import { ElMessage } from "element-plus";
import router from "@/router";
import { refreshToken } from "./refreshtoken";
const service = axios.create({
  baseURL: "http://localhost:8087",
  headers: {
    Authorization: `Bearer ${getToken()}`,
  },
});
// 添加請(qǐng)求攔截器
service.interceptors.request.use(
  function (config) {
    if (config.url === "/refresh_token") {
      config.headers["Authorization"] = `Bearer ${getRefreshToken()}`;
    }
    // 在發(fā)送請(qǐng)求之前做些什么
    return config;
  },
  function (error) {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
  }
);

// 添加響應(yīng)攔截器
service.interceptors.response.use(async (res) => {
  // 1.第一次登錄了以后 后臺(tái)在header里面返回了短token 那么要先接收token存儲(chǔ)到localstorage里面
  if (res.headers.authorization) {
    const token = res.headers.authorization.replace("Bearer ", "");
    // 設(shè)置短token
    setToken(token);
    service.defaults.headers.Authorization = `Bearer ${token}`;
  }
  // 2. 第一次登錄了以后 后臺(tái)在header里面返回了長(zhǎng)token 那么要先接受長(zhǎng)token 存儲(chǔ)到localstorage里面
  if (res.headers.refreshtoken) {
    const refreshtoken = res.headers.refreshtoken.replace("Bearer ", "");
    // 設(shè)置長(zhǎng)token
    setRefreshToken(refreshtoken);
  }
  // 3 假設(shè)當(dāng)后端返回401的時(shí)候 代表token失效 時(shí)間到了 這個(gè)時(shí)候正常處理就是跳到登錄頁(yè)面
  // 但是在實(shí)際的業(yè)務(wù)場(chǎng)景的時(shí)候 用戶(hù)體驗(yàn)非常不好

  if (res.data.code === 401) {
    // ElMessage({
    //   message: "token失效",
    //   type: "warning",
    // });
    // router.push("/login");
    // 這個(gè)地方就是短token失效了 提交表單 不跳到登錄頁(yè)面 因?yàn)檫@樣用戶(hù)體驗(yàn)很不好
    // 請(qǐng)求剛剛定義的一個(gè)接口
    // 這個(gè)時(shí)候 提交表單的接口 還沒(méi)提交 停在這里了 現(xiàn)在要干啥？請(qǐng)求
    // 干啥了？ 請(qǐng)求了changtoken攜帶過(guò)去 刷新token的接口
    const success = await refreshToken();
    if (success) {
      res.config.headers.Authorization = `Bearer ${getToken()}`;
      const result = await service.request(res.config);
      return result;
    }
  }

  return res.data;
});

function request(options) {
  options.method = options.method || "get";
  // 關(guān)于get請(qǐng)求參數(shù)的調(diào)整
  if (options.method.toLowerCase() === "get") {
    options.params = options.data;
  }

  return service(options);
}

export default request;

對(duì)應(yīng)的token.js和refreshtoken.js代碼：

模擬網(wǎng)卡的時(shí)候，響應(yīng)數(shù)據(jù)還沒(méi)返回就重復(fù)刷新的情況：（本質(zhì)就是借助Promise。將請(qǐng)求存進(jìn)隊(duì)列中后，同時(shí)返回一個(gè)Promise，讓這個(gè)Promise一直處于Pending狀態(tài)（即不調(diào)用resolve），此時(shí)這個(gè)請(qǐng)求就會(huì)一直等啊等，只要我們不執(zhí)行resolve，這個(gè)請(qǐng)求就會(huì)一直在等待。當(dāng)刷新請(qǐng)求的接口返回來(lái)后，我們?cè)僬{(diào)用resolve，逐個(gè)重試。）

將token存進(jìn)localstorage里,同時(shí)為了防止多次刷新

使用 Token 和 Refresh Token 的時(shí)序圖如下：

1）登錄

2）業(yè)務(wù)請(qǐng)求

3）Token 過(guò)期，刷新 Token

現(xiàn)在，我們就已經(jīng)成功實(shí)現(xiàn)了長(zhǎng)短token的無(wú)感刷新啦！

一定要理解文章開(kāi)頭這張圖的流程哦

總結(jié)

到此這篇關(guān)于前端雙token無(wú)感刷新的文章就介紹到這了,更多相關(guān)前端雙token無(wú)感刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論