vue2实现无感刷新token

拼搏现实的明天。 2024-04-21 08:12 33阅读 0赞

![f32d52385fe74f818938a999e6ba42a4.png][]

**? 江城开朗的豌豆**：[个人主页][Link 1]

**? 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript]

? **个人网站** :[《 江城开朗的豌豆? 》][Link 2]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

? 引言：

? 安装依赖

? 创建 Axios 实例并做请求封装

? 使用封装的 Axios 实例

? 写在最后

--------------------

## ? 引言： ##

> 在 Web 应用中，用户需要通过认证和授权才能访问受保护的资源。为了实现认证和授权功能，通常需要使用 Token 来标识用户身份并验证其权限。但是，Token 有时限制其有效期，以确保安全性。
> 
> 当 Token 过期时，应用程序会返回一个 401（未授权）错误，提示用户重新登录或刷新页面。这可能会影响用户体验和流程，并可能导致应用程序的性能问题。
> 
> 因此，为了提高应用程序的用户体验和可靠性，通常会使用无感刷新 Token 的技术来自动刷新过期的 Token。这样，即使 Token 过期，用户也可以继续使用应用程序而不会收到任何干扰。此外，无感刷新 Token 还可以提高应用程序的安全性和稳定性，因为它可以有效地防止 Token 被恶意利用或攻击。
> 
> 需要注意的是，在实现无感刷新 Token 的过程中，需要注意保护用户数据的安全性，并遵守相关的安全标准和法律法规。同时，还需要根据应用程序的需求和后端接口的设计来调整具体的实现方式。

## ? 安装依赖 ##

现在我们开始写入vue2前端代码

首先，确保已经安装了 Axios 和相关的依赖。

npm install axios

## ? 创建 **Axios** 实例并做请求封装 ##

在 `src/utils/request.js` 文件中创建一个 Axios 实例，并进行相关配置。

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, // 超时时间
    });
    
    // request 拦截器
    // 可以自请求发送前对请求做一些处理
    // 比如统一加token，对请求参数统一加密
    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; // 设置请求头  
        return config;
      },
      (error) => {
        return Promise.reject("网络异常,请稍后再试" + error);
      }
    );
    
    // response 拦截器
    // 可以在接口响应后统一处理结果
    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];
          // 这里需要调用登录接口，重新获取token
          return refreshToken(userInfo).then((newToken) => {
            // 更新本地存储的 Token       
            localStorage.setItem("token", newToken);
            // 重新发送原请求
            return service(response.config);
          });
        }
    
        let res = response.data;
        // 兼容服务端返回的字符串数据
        if (typeof res === "string") {
          res = res ? JSON.parse(res) : res;
        }
        return res;
      },
      (error) => {
        return Promise.reject("网络异常,请稍后再试" + error);
      }
    );
    function refreshToken(userInfo) {
      return new Promise((resolve, reject) => {
        // 调用登录接口重新获取 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 实例 ##

在需要发送请求的地方引入封装的 Axios 实例，并使用它来发送请求。

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

## ? 写在最后 ##

> 通过上述代码，在使用 Axios 发送请求时，会自动处理 Token 过期的情况，并进行无感刷新 Token。这样可以提高应用程序的用户体验和安全性。
> 
> 请大家不吝赐教,在下方评论或者私信我,十分感谢???.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 ?赞再走吧！

![637c19f99c8c4f7dab6d610483f35438.gif][]

[f32d52385fe74f818938a999e6ba42a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/d28f7df9467a4a689fee4623ec527bef.png
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[Link 2]: https://tinyurl.com/yangtaoWeb
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/99d04b443b5a4c81b641897cf482086c.gif
[637c19f99c8c4f7dab6d610483f35438.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/690db0edd93045d8bf38ea3ab81c9167.gif