在中间件中访问 LocalStorage - NuxtJs答案

【问题标题】：Access LocalStorage in Middleware - NuxtJs在中间件中访问 LocalStorage - NuxtJs
【发布时间】：2019-02-13 20:29:04
【问题描述】：

嗯，我从 nuxt 开始，我有以下路线：

/home

/dashboard

/login

我想保护 /dashboard，但仅限于使用localStorage 中的令牌登录的用户。

我想到的最简单的方法是创建一个 /middleware/auth.js

export default function () {
  if (!window.localStorage.getItem('token')) {
    window.location = '/login'
  }
}

并将其注册到 /dashboard/index.vue 组件中。

<script>
export default {
  middleware: 'auth',
}
</script>

但我无法在中间件中访问 localStorage，因为 LocalStorage 是客户端。

我已经尝试在created()仪表板布局中添加同样的检查，但是我无法返回窗口未设置mounted()太迟了，它只能在页面完全组装后才能检查。

那么我该如何实现呢？注意：我不打算在这个项目中使用任何 Vuex。

【问题讨论】：

【解决方案1】：

对于任何不满意将信息存储在 cookie 中的人，这是我的解决方案：

我在这方面遇到了很多问题，我对设置 cookie 不满意。如果您正在运行 Nuxt 并且没有告诉它以 spa 模式运行，它将以通用模式运行。 Nuxt 将通用模式定义为：

同构应用（服务器端渲染+客户端导航）

结果是 localStorage 未在服务器端定义，因此引发错误。

给我的好处是控制台日志从中间件文件和 Vuex 输出到终端，而不是浏览器中开发人员工具中的控制台。

我的解决方案是在位于根目录的 nuxt.config.js 中将模式更改为 spa。

请注意，您仍然可以在页面文件和组件中访问 localStorage，运行通用模式，因为它们不是服务器端。

在通用模式下，中间件文件在服务器端运行，因此更改为 spa 模式会使它们运行在客户端，从而允许它们访问 localStorage。

有关 Nuxt 模式的更多信息，请阅读以下内容：

【讨论】：

【解决方案2】：

我用cookie-universal-nuxt

在登录操作的 vuex 商店中，我使用令牌设置了提交

window.$cookies.set('token', payload, {
    path: '/',
})

并在中间件中访问它中间件/auth.js

export default (context) => {
    if (!context.app.$cookies.get('token')) {
        return context.redirect('/login')
    }
}

【讨论】：

【解决方案3】：

您可以将它用于 Nuxt 中的本地存储（和许多其他东西）。它将在客户端和服务器上工作。没有文档，但 README 就足够了。

【讨论】：

我没有找到使用示例或文档的方法
@YungSilva 是的，它还不存在。来源是要走的路。关键是您需要使用 cookie 或使用中间件以外的其他东西 -> 请参阅此问题以了解问题和一些解决方法github.com/nuxt/nuxt.js/issues/2653#issuecomment-390588837
这其实是一个很不错的模块。我刚刚在我的一个项目中使用了它，效果非常好。