用于特定路由的 NuxtJS 路由中间件答案

【问题标题】：NuxtJS route middleware for specific routes用于特定路由的 NuxtJS 路由中间件
【发布时间】：2021-09-17 18:18:55
【问题描述】：

我想保护某些路由仅在用户登录时可用。我想这样做的方法是进行 API 调用以验证当前令牌。

令牌可以在本地存储或存储 (VueX) 中。

我在中间件文件夹中创建了一个名为 auth.js 的中间件，并将其添加到 nuxt.config.js 文件中。

export default function ({ store, redirect }) {
  if (!process.client && !store.getters['user/getUserToken']) {
    return redirect('/login')
  }
}

我现在遇到的问题是 process.client 被忽略并且此代码在服务器 (SSR) 上触发，因此导致错误“localStorage is not defined”。

我已经尝试让这个工作三天了，所以希望有人可以向我解释如何让这个工作。

我想要实现的是，我能够在页面加载之前发出 API 请求以验证用户的令牌。令牌可以存储在 VueX 存储或本地存储中。所以我需要同时访问两者。

希望有人可以帮助我了解如何使其正常工作。

仅供参考，我使用的是 fetch 方法，而不是 Axios 或类似的东西。对于这个项目，使用 Axios 不是一种选择，因为我们需要进行很多重构。

【问题讨论】：

【解决方案1】：

如果您使用的不是nuxt/auth，而是自制的解决方案，您仍然可以从我的回答中得到启发：https://stackoverflow.com/a/68175140/8816585

我的 global.js 中间件与 auth 中间件（来自 nuxt/auth）是互补的，但逻辑也可以在那里以相同的方式完成。

一些要点：

【讨论】：