快捷導(dǎo)航

vue2實(shí)現(xiàn)無感刷新token的方式詳解

更新時(shí)間：2024年02月28日 09:40:40 作者：江城開朗的豌豆

在Web應(yīng)用中,用戶需要通過認(rèn)證和授權(quán)才能訪問受保護(hù)的資源,為了實(shí)現(xiàn)認(rèn)證和授權(quán)功能,通常需要使用Token來標(biāo)識(shí)用戶身份并驗(yàn)證其權(quán)限,本文給大家介紹了vue2實(shí)現(xiàn)無感刷新token的方式,需要的朋友可以參考下

引言：

在 Web 應(yīng)用中，用戶需要通過認(rèn)證和授權(quán)才能訪問受保護(hù)的資源。為了實(shí)現(xiàn)認(rèn)證和授權(quán)功能，通常需要使用 Token 來標(biāo)識(shí)用戶身份并驗(yàn)證其權(quán)限。但是，Token 有時(shí)限制其有效期，以確保安全性。

當(dāng) Token 過期時(shí)，應(yīng)用程序會(huì)返回一個(gè) 401（未授權(quán)）錯(cuò)誤，提示用戶重新登錄或刷新頁面。這可能會(huì)影響用戶體驗(yàn)和流程，并可能導(dǎo)致應(yīng)用程序的性能問題。

因此，為了提高應(yīng)用程序的用戶體驗(yàn)和可靠性，通常會(huì)使用無感刷新 Token 的技術(shù)來自動(dòng)刷新過期的 Token。這樣，即使 Token 過期，用戶也可以繼續(xù)使用應(yīng)用程序而不會(huì)收到任何干擾。此外，無感刷新 Token 還可以提高應(yīng)用程序的安全性和穩(wěn)定性，因?yàn)樗梢杂行У胤乐?Token 被惡意利用或攻擊。

需要注意的是，在實(shí)現(xiàn)無感刷新 Token 的過程中，需要注意保護(hù)用戶數(shù)據(jù)的安全性，并遵守相關(guān)的安全標(biāo)準(zhǔn)和法律法規(guī)。同時(shí)，還需要根據(jù)應(yīng)用程序的需求和后端接口的設(shè)計(jì)來調(diào)整具體的實(shí)現(xiàn)方式。

安裝依賴

現(xiàn)在我們開始寫入vue2前端代碼

首先，確保已經(jīng)安裝了 Axios 和相關(guān)的依賴。

npm install axios

創(chuàng)建 Axios 實(shí)例并做請(qǐng)求封裝

在 src/utils/request.js 文件中創(chuàng)建一個(gè) Axios 實(shí)例，并進(jìn)行相關(guān)配置。

import axios from "axios";
 
const service = axios.create({
  baseURL:
    process.env.NODE_ENV !== "production"
      ? process.env.VUE_APP_BASE_API
      : process.env.VUE_APP_BASE_API_RUL,  
  timeout: 10000, // 超時(shí)時(shí)間
});
 
// request 攔截器
// 可以自請(qǐng)求發(fā)送前對(duì)請(qǐng)求做一些處理
// 比如統(tǒng)一加token，對(duì)請(qǐng)求參數(shù)統(tǒng)一加密
service.interceptors.request.use(
  (config) => {
    const token = window.localStorage.getItem("token");
    token && (config.headers.Authorization = token);
    config.headers["Content-Type"] = "application/json;charset=utf-8";
    config.headers["Authorization"] = "Bearer " + token; // 設(shè)置請(qǐng)求頭  
    return config;
  },
  (error) => {
    return Promise.reject("網(wǎng)絡(luò)異常,請(qǐng)稍后再試" + error);
  }
);
 
// response 攔截器
// 可以在接口響應(yīng)后統(tǒng)一處理結(jié)果
service.interceptors.response.use(
  (response) => {
    if (response.data.code == 401) {
      let userInfo = {};
      userInfo.account =  process.env.VUE_APP_TOKEN.split(",")[0];
      userInfo.password =  process.env.VUE_APP_TOKEN.split(",")[1];
      // 這里需要調(diào)用登錄接口，重新獲取token
      return refreshToken(userInfo).then((newToken) => {
        // 更新本地存儲(chǔ)的 Token       
        localStorage.setItem("token", newToken);
        // 重新發(fā)送原請(qǐng)求
        return service(response.config);
      });
    }
 
    let res = response.data;
    // 兼容服務(wù)端返回的字符串?dāng)?shù)據(jù)
    if (typeof res === "string") {
      res = res ? JSON.parse(res) : res;
    }
    return res;
  },
  (error) => {
    return Promise.reject("網(wǎng)絡(luò)異常,請(qǐng)稍后再試" + error);
  }
);
function refreshToken(userInfo) {
  return new Promise((resolve, reject) => {
    // 調(diào)用登錄接口重新獲取 Token
    axios  
      .post(`${process.env.VUE_APP_BASE_API}/pc_admin/login`, {    
        ...userInfo,
      })
      .then((response) => {
        resolve(response.data.data.token);
      })
      .catch((error) => {
        reject(error);
      });
  });
}
 
export default service;

使用封裝的 Axios 實(shí)例

在需要發(fā)送請(qǐng)求的地方引入封裝的 Axios 實(shí)例，并使用它來發(fā)送請(qǐng)求。

//sever.js
import request from "./http";
// 測試接口
export function getListApi(params) {
    return request({
        url: "/pc_admin/article", 
        method: "get",
        params: params,
    });
}