在现代Web应用开发中，用户体验至关重要。Vue3 与 Vite 的组合为开发者带来了高效且优质的开发体验，而利用双 token 实现无感刷新更是提升用户体验的关键一环。

我们要明白什么是双 token。通常，双 token 指的是 access token 和 refresh token。access token 用于验证用户在短期内的操作权限，而 refresh token 则在 access token 过期时，用于获取新的 access token，从而避免用户因 token 过期而被强制重新登录。

在 Vue3 与 Vite 的项目中，实现双 token 无感刷新，我们需要几个关键步骤。

第一步是登录获取双 token。在用户登录成功后，服务器会返回 access token 和 refresh token。我们可以将这两个 token 存储在本地，比如使用 localStorage 或 Vuex 来管理。例如，在 Vuex 的 mutations 中定义存储方法：

const mutations = {
  SET_ACCESS_TOKEN(state, token) {
    state.accessToken = token;
  },
  SET_REFRESH_TOKEN(state, token) {
    state.refreshToken = token;
  }
};

接着，在每次发送请求时，我们要在请求头中带上 access token。可以通过创建一个拦截器来实现。在 Vite 项目中，使用 axios 时，可以这样设置：

import axios from 'axios';

const instance = axios.create();

instance.interceptors.request.use(config => {
  const accessToken = localStorage.getItem('accessToken');
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

当服务器返回 401 状态码，表示 access token 过期时，我们需要利用 refresh token 去获取新的 access token。这时候可以在响应拦截器中处理：

instance.interceptors.response.use(response => {
  return response;
}, async error => {
  if (error.response.status === 401) {
    const refreshToken = localStorage.getItem('refreshToken');
    try {
      const res = await axios.post('/api/refresh', { refreshToken });
      const newAccessToken = res.data.accessToken;
      localStorage.setItem('accessToken', newAccessToken);
      error.config.headers.Authorization = `Bearer ${newAccessToken}`;
      return instance(error.config);
    } catch (err) {
      // 处理 refresh token 也过期的情况，引导用户重新登录
    }
  }
  return Promise.reject(error);
});

通过以上步骤，我们就能在 Vue3 与 Vite 的项目中实现双 token 的无感刷新，为用户提供更加流畅的使用体验。