vue3 jwt 认证

Vue3 JWT认证通常用于基于令牌的身份验证流程，其中JWT（JSON Web Tokens）是一种安全的方式来在客户端和服务端之间传递用户信息。在Vue3应用中集成JWT认证，你可以按照以下步骤进行：

1. **安装依赖**：首先需要安装`vue-authenticate`或`axios`等库，它们可以方便地处理HTTP请求和JWT。

   npm install axios vuex-jwt @nuxtjs/auth-module

2. **设置守卫**（Vuex Router）：在`store/index.js`中配置路由守卫，检查是否有有效的JWT token。如果无token，可以重定向到登录页面。

   import { createRouter, createWebHistory } from 'vue-router'
   // ...
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes,
     middleware: ['auth']
   })
   // 使用vuex-jwt中间件，它会拦截所有请求并添加token头
   import VueJwt from 'vuex-jwt'
   Vue.use(VueJwt, {
     storeKey: 'jwt', // 存储JWT的地方
     tokenGetter: () => localStorage.getItem('jwt') // 获取token的函数
   })

3. **登录功能**：创建登录表单，当用户输入有效凭据后发送JWT请求，然后将生成的token存储到本地，并将其作为Authorization header包含在后续的API请求中。

4. **登出操作**：提供登出按钮，清除token和存储，以及从响应头移除JWT。

5. **错误处理**：处理token过期或无效的情况，当遇到401（未授权）错误时，通常会重定向回登录页。