特定路由的 NuxtJS 路由中间件
NuxtJS route middleware for specific routes
我想保护某些路由仅在用户登录时可用。我想要执行此操作的方法是调用 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 存储或本地存储中。所以我需要同时访问两者。
希望有人能帮助我解决这个问题。
仅供参考，我使用的是获取方法，而不是 Axios 或类似的方法。对于这个项目，使用 Axios 不是一个选项，因为我们需要重构很多。
如果您不使用 nuxt/auth but a homemade solution, you can still get inspired by my answer here:
我的 global.js 中间件是 auth 中间件的补充（来自 nuxt/auth），但逻辑也可以用相同的方式完成。
一些要点：
- 中间件总是 运行 在您的页面呈现之前，因此您没有义务在服务器上执行此操作，验证仍会在 之前 内容可见
- 更喜欢使用
cookie 而不是 localStorage，更安全并且在服务器和客户端上都可用
- 在我看来，使用 axios 或 fetch 都不是什么大问题，因为它们基本上做完全相同的事情（总体而言）
axios 可以重命名为 fetch，特别是如果你有一个通用的
可配置文件，有点老套，但需要较少的维护 IMO
我想保护某些路由仅在用户登录时可用。我想要执行此操作的方法是调用 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 存储或本地存储中。所以我需要同时访问两者。
希望有人能帮助我解决这个问题。
仅供参考，我使用的是获取方法，而不是 Axios 或类似的方法。对于这个项目，使用 Axios 不是一个选项，因为我们需要重构很多。
如果您不使用 nuxt/auth but a homemade solution, you can still get inspired by my answer here:
我的 global.js 中间件是 auth 中间件的补充（来自 nuxt/auth），但逻辑也可以用相同的方式完成。
一些要点：
- 中间件总是 运行 在您的页面呈现之前，因此您没有义务在服务器上执行此操作，验证仍会在 之前 内容可见
- 更喜欢使用
cookie而不是localStorage，更安全并且在服务器和客户端上都可用 - 在我看来，使用 axios 或 fetch 都不是什么大问题，因为它们基本上做完全相同的事情（总体而言）
axios可以重命名为fetch，特别是如果你有一个通用的 可配置文件，有点老套，但需要较少的维护 IMO