在中间件中访问LocalStorage - NuxtJs

Question

嗯，我从 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。

Answer 1

我使用了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')
    }
}

Answer 2

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

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

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

结果是 localStorage 没有在服务器端定义，因此抛出错误。

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

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

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

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

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

• https://nuxtjs.org/guide/
• https://recurse.me/posts/choosing-a-nuxt-mode.html

Answer 3

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

https://github.com/nuxt-community/universal-storage-module

Answer 4

nuxt 中间件运行两次，一次是当您的请求发送到服务器时，另一次是当该请求的响应在您的浏览器中呈现时， 所以在服务器端没有本地存储，你应该尝试在浏览器中访问本地存储，对吗？

export default defineNuxtRouteMiddleware(to => {

   if (process.server) {
       // this section will run on the server
   }

   if (process.client) {
      //this section will run in the browser so you can access 
      // local storage
   }


   const nuxtApp = useNuxtApp()
   if (process.client && nuxtApp.isHydrating && 
               nuxtApp.payload.serverRendered) {
      // this section will run only once , in the browser, when the page 
      // initialized
   }
})