怎样实现双token无感刷新 vue3

在Vue3中，实现双token（例如JWT和OAuth）无感刷新通常涉及到服务端的配合以及前端的生命周期管理。以下是基本步骤：

1. **配置守卫**:
- 使用axios拦截器，在请求头中自动添加这两个token。例如，可以创建两个interceptor，一个用于处理JWT，另一个用于OAuth。

   import axios from 'axios';
   
   const jwtInterceptor = axios.interceptors.request.use(
     config => {
       // 添加JWT token
       if (localStorage.getItem('jwt')) {
         config.headers.Authorization = `Bearer ${localStorage.getItem('jwt')}`;
       }
       return config;
     },
     error => Promise.reject(error)
   );
   
   const oauthInterceptor = axios.interceptor.request.use(
     config => {
       // 添加OAuth token
       if (localStorage.getItem('oauthToken')) {
         config.headers.Authorization = `Bearer ${localStorage.getItem('oauthToken')}`;
       }
       return config;
     },
     error => Promise.reject(error)
   );

   // 注册拦截器
   axios.use(jwtInterceptor);
   axios.use(oauthInterceptor);

2. **服务端支持**:
- 后端需要设置好无感刷新的机制，当一个token过期时，返回新的token同时附带旧token信息，前端可以通过这个信息更新当前的token。

3. **状态管理**:
- 使用Vuex或pinia等状态管理库来保存用户的登录状态和token。当接收到新的token时，更新store状态，并触发视图层的数据更新。

4. **状态感知组件**:
- 在组件中，使用计算属性或watch监听store中的登录状态变化，自动进行token切换和刷新操作。如果在某个地方检测到token无效，则尝试进行刷新。

5. **错误处理**:
- 需要处理token失效时的用户反馈，比如显示友好的错误提示，引导用户重新授权。

注意：这只是一个基础示例，实际场景可能会更复杂，比如处理各种网络状况、权限验证等问题。此外，为了安全性考虑，建议在生产环境中对敏感操作进行严格的令牌验证。