vue无感刷新token

在 Vue 中实现无感刷新 Token 的方法可以使用 Axios 拦截器来实现。以下是一个简单的示例：
1、在 Vue 项目中创建一个 http.js 文件，用来配置 Axios：

// http.js
 
import axios from 'axios';
import store from '@/store'; // 引入 Vuex Store
 
const http = axios.create({
  baseURL: 'https://api.example.com', // 你的接口地址
});
 
// 请求拦截器，在每个请求的 headers 中添加 Token
http.interceptors.request.use(config => {
  const token = store.state.token;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});
 
// 响应拦截器，检查是否返回 Token 刷新失败的错误码
http.interceptors.response.use(response => {
  return response;
}, error => {
  const status = error.response.status;
  if (status === 401) {
    // 如果返回了 Token 刷新失败的错误码，说明 Token 已过期，需要重新获取
    // 这里可以调用你的 Token 刷新方法，获取到新的 Token 后更新到 Vuex Store
 
    // 示例代码
    return axios.post('/refresh-token').then(response => {
      const newToken = response.data.token;
      store.commit('updateToken', newToken); // 更新 Token 到 Vuex
      // 使用原来的请求配置重新发起请求
      return http(error.config);
    });
  }
  return Promise.reject(error);
});
 
export default http;

2、在 Vuex Store 中添加一个 token 状态以及更新 Token 的方法：

// store.js
 
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
  state: {
    token: '', // 存储 Token 的状态
  },
  mutations: {
    updateToken(state, newToken) {
      state.token = newToken; // 更新 Token
    },
  },
});
 
export default store;

3、在 Vue 组件中使用 http.js 发起请求：

// ExampleComponent.vue
 
import http from '@/utils/http';
 
export default {
  mounted() {
    http.get('/api/endpoint')
      .then(response => {
        // 处理响应结果
      })
      .catch(error => {
        // 处理错误
      });
  },
};