Vue3+Vite使用双token实现无感刷新

下面我将详细讲解“Vue3+Vite使用双token实现无感刷新”的完整攻略。

什么是双token实现无感刷新？

双token是指前后端各自维护一个token，前端在请求后端接口时需要在请求头中携带两个token，一个是用户信息token，另一个是操作token，后端通过判断这两个token的有效性，来决定是否需要重新登录，从而达到无感知的更新token的目的。

Vue3+Vite项目中使用双token实现无感刷新的步骤

以下是使用Vue3+Vite项目中使用双token实现无感刷新的详细步骤：

第一步：在Vite项目中安装axios

由于我们需要使用axios来进行网络请求，因此我们需要安装axios。

npm install axios --save

第二步：创建service.js文件

我们需要创建一个js文件，用于封装axios的请求。

import axios from 'axios';

const service = axios.create({
    baseURL: '/api', // 接口的根路径
    timeout: 10000, // 超时时间
    headers: {
        'Content-Type': 'application/json;charset=UTF-8',
    }
});

export default service;

第三步：实现请求拦截器和响应拦截器

由于我们需要在请求头中添加两个token，因此我们需要在请求拦截器中添加逻辑。

import service from '@/utils/request';
import { getToken, getRefreshToken } from '@/utils/auth';

service.interceptors.request.use(
  config => {
    config.headers['Authorization'] = getToken();
    config.headers['Refresh-Token'] = getRefreshToken();
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

第四步：实现token刷新的逻辑

当前端的操作token过期时，需要重新获取新的token。因此我们需要在请求失败的时候，判断是否需要刷新操作token。

import service from '@/utils/request';
import { getToken, getRefreshToken, setToken } from '@/utils/auth';

service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 20000) {
      if (res.code === 40001) {
        return refreshToken(response);
      } else {
        return Promise.reject('error');
      }
    } else {
      return res;
    }
  },
  error => {
    if (error.response.status === 401) {
      return refreshToken(error.response);
    } else {
      return Promise.reject(error);
    }
  }
);

const refreshToken = async (response) => {
  const newTokenRes = await service.post('/auth/refresh', { refreshToken: getRefreshToken() });
  if (newTokenRes.code === 20000) {
    setToken(newTokenRes.result.token);
    response.config.headers['Authorization'] = getToken();
    return service(response.config);
  }
};

以上就是使用双token实现无感刷新的完整步骤。

示例说明

示例一

我们可以在应用程序的登录页面中发送一个POST请求，来处理用户的身份验证。

import service from '@/utils/request';

export const login = (username, password) => {
  return service.post('/auth/login', {
    username,
    password
  });
}

示例二

我们可以在应用程序的任何地方发送一个GET请求来获取用户信息。

import service from '@/utils/request';

export const getUserInfo = () => {
  return service.get('/user/info');
}

以上两个示例展示了，在Vue3+Vite项目中如何使用双token实现无感刷新。其中请求拦截器、响应拦截器和token刷新的逻辑，都是可以复用的。根据实际业务需求，可以在此基础上进行修改，实现更复杂的功能。