vue2实现无感刷新token_vue2 会无感刷新

🎬 江城开朗的豌豆：个人主页

🔥 个人专栏:《 VUE 》 《 javaScript 》

📝个人网站:《 江城开朗的豌豆🫛 》

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

目录

📘 引言：

📟 安装依赖

📟 创建 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);
      });
  });
}



### 紧跟潮流



大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分


![](https://img-blog.csdnimg.cn/img_convert/8f4634e85dd904c95364c9d62e0e9eff.png)