1

我想保护某些路由仅在用户登录时可用。我想要这样做的方法是进行 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）上触发，因此导致错误“未定义本地存储”。

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

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

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

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

4

1 回答 1

1

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

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

一些要点：

  • 中间件始终在您的页面呈现之前运行，因此您没有义务在服务器上执行此操作，验证仍将在内容可见之前进行
  • 更喜欢在服务器和客户端上使用cookie而不是更安全和可用localStorage
  • 使用 axios 或 fetch 对 IMO 来说没什么大不了的，因为它们基本上做同样的事情（总体而言）
  • axios可以重命名为fetch，特别是如果您有一个通用的可配置文件，有点hacky但需要较少的维护IMO
于 2021-07-07T08:33:15.703 回答