vue3+ts的双token怎么实现

在Vue3中使用TypeScript实现双token（通常指JWT和OAuth）管理，可以分为以下几个步骤：

1. 安装依赖：首先安装必要的依赖，如axios用于发送HTTP请求，vue-router用于路由管理，`@/utils/auth`用于封装认证逻辑，以及`jsonwebtoken`处理JWT。

npm install axios vue-router jsonwebtoken @types/jsonwebtoken @types/axios --save

2. 创建认证模块（AuthUtil.js）：创建一个文件，例如`src/utils/AuthUtil.ts`，用于处理JWT的生成、验证和存储。这里你可以设置一个函数来获取用户令牌（JWT），另一个函数用于刷新令牌，同时也可以封装登录和登出的方法。

import jwt from 'jsonwebtoken';
import axios from 'axios';

export const getToken = () => localStorage.getItem('jwt');
export const refreshToken = async (refreshToken: string) => {
  // 实现使用refreshToken获取新JWT
};
export const login = async (credentials: { username: string; password: string }) => {
  // 发送POST请求到API进行登录
};
export const logout = () => {
  localStorage.removeItem('jwt');
};

3. 使用守卫（Vuex Store）：在Vue Router中，你可以创建全局的路由守卫来检查是否有有效的token。这通常会涉及VueX状态管理库（如Vuex）来保存用户的认证状态。

import { useStore } from 'vuex';
import AuthUtil from '@/utils/AuthUtil';

const store = useStore();
const auth = store.state.auth;

router.beforeEach((to, from, next) => {
  if (!auth.loggedIn && to.meta.requiresAuth) {
    // 如果未登录且需要授权，则重定向到登录页面
    next('/login');
  } else {
    next();
  }
});

4. JWT验证：在每个需要权限的API请求中，可以在 Axios interceptor 中添加对JWT的验证。如果JWT过期或无效，拦截器会清除token并重定向用户到登录页。

import axios from 'axios';

axios.interceptors.request.use(
  config => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

5. 存储和刷新：登录成功后，将JWT存入浏览器本地存储，并在JWT即将过期时调用`refreshToken`方法更新JWT。

注意：实际项目中，还要考虑错误处理和安全性措施，比如防止CSRF攻击等。