vue2实现无感刷新token的方式详解

npm install 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;

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