nuxtjs中的ofetch怎么做无感刷新

在Nuxt.js中使用ofetch进行无感刷新通常涉及到处理API请求和响应，特别是在处理身份验证令牌（如JWT）的场景下。无感刷新的目的是在用户不知情的情况下，自动更新其认证令牌（通常是Access Token），以保证用户的会话不会中断。这通常涉及到两种类型的令牌：

1. Access Token：用户进行认证后得到的令牌，允许用户访问服务器的受保护资源，通常有一个较短的有效期。
2. Refresh Token：在同一时间发放给用户的另一个令牌，用于在Access Token过期时获取一个新的Access Token，其有效期比Access Token长。

实现无感刷新的基本步骤

1. 检查Access Token的有效性：在每次API请求时，检查Access Token是否有效。如果无效，使用Refresh Token请求新的Access Token。
2. 更新Access Token：在获得新的Access Token后，更新本地存储中的Access Token，并重新发送之前因Token过期而暂停的请求。
3. 处理Refresh Token过期：如果Refresh Token也过期或无效，引导用户重新登录。

示例代码

以下是一个简化的示例，展示了如何在Nuxt.js中使用ofetch和Vue的axios库来实现无感刷新：

import axios from 'axios';
import { useCookie } from '#app';

const userToken = useCookie('userToken');
const refreshToken = useCookie('refreshToken');

const api = axios.create({
  baseURL: process.env.API_BASE_URL,
  headers: {
    Authorization: `Bearer ${userToken.value.accessToken}`
  }
});

api.interceptors.response.use(
  response => response,
  error => {
    const originalRequest = error.config;
    if (error.response.status === 401 &&!originalRequest._retry) {
      originalRequest._retry = true;
      return axios.post('/refresh-token', { refreshToken: refreshToken.value })
       .then(res => {
          if (res.status === 200) {
            userToken.value.accessToken = res.data.accessToken;
            axios.defaults.headers.common['Authorization'] = `Bearer ${userToken.value.accessToken}`;
            return api(originalRequest);
          }
        });
    }
    return Promise.reject(error);
  }
);

export default api;

在这个示例中，我们使用了axios的拦截器来捕获401错误（未授权），并在这种情况下尝试使用Refresh Token来获取新的Access Token。如果成功，我们更新本地存储中的Access Token，并重新发送原始请求。

请注意，这只是一个基本的示例，实际应用中可能需要更多的错误处理和安全措施。此外，确保在服务器端正确处理Refresh Token的验证和新Access Token的发放。

无感刷新的注意事项

• 安全性：确保在传输和存储过程中，令牌的安全性。
• 令牌轮换：考虑实施令牌轮换策略，每次使用后废弃旧的Refresh Token并发放一个新的。
• 错误处理：提供清晰的错误处理机制，以便在令牌刷新失败时引导用户重新登录。