小编Vah*_*ahe的帖子

我正在尝试使用具有 JWT 身份验证的应用程序创建 Vue 3，并遇到使用 Pinia 商店中的“isAuth”变量来检查访问权限来保护路由器的问题。最终，Vue 路由器和应用程序的整体加载速度比商店更快，这就是为什么我总是从商店获得“未经授权”的值，但实际上用户已登录并且他的数据在商店中。我将尝试描述注册和登录用户的所有步骤。

1. 注册到 NodeJS 后端并创建 JWT 令牌。
2. 在登录屏幕上，用户输入电子邮件和密码，如果信息有效，他将登录，JWT 将保存到本地存储并通过 JWTdecode 进行解码，解码后的令牌数据将保存到用户变量中的存储中，isAuth 变量设置为 true 。
3. Pinia 商店有 2 个状态字段：user（最初为 null）和 isAuth（最初为 false）。
4. 在主应用程序组件中，我使用异步 onMounted 挂钩来检查令牌并通过调用 API 方法（该方法与 JWT 进行比较）来保持用户登录状态。
5. 在 Vue 路由器中，我有几条路线必须受到保护，免受未经授权的用户的侵害，这就是为什么我试图通过检查商店中的用户信息来为它们创建导航防护。问题是，路由器是在设置用户信息后创建的，并且始终获取用户的初始状态和 isAuth 变量。

代码：

店铺

import { defineStore } from 'pinia';

export const useLoggedInUserStore = defineStore({
  id: 'loggedInUser',
  state: () => ({
  isAuth: false,
  user: null
   }),

  getters: {
  getisAuth(state) {
  return state.isAuth;
    },
  getUser(state) {
  return state.user;
   }
  },
 actions: {
  setUser(user) { …