如何在 Nuxt.js 商店中使用 localStorage

Question

我正在处理一个 nuxt.js project.here，我想在localStorage里面使用Nuxt-Store，也想localStorage从Nuxt-Middleware. 它显示一个错误。

localStorage 未定义。

我怎么解决这个问题 ？

在这里，代码示例 store/index.js

setUser(state, { user }){
    state.user = user
    state.isLoggedIn = true
    localStorage.setItem('user', JSON.stringify(user));
    localStorage.setItem('isLoggedIn', state.isLoggedIn);
},

我的中间件代码在这里-

export default function({ store, redirect, route}) {
const user = localStorage.getItem('user');
const loggedStatus = store.getters['isLoggedIn']

if (user) {
    if(route.path == '/login' || route.path == '/user/temporary'){
        return redirect('/')
    } 
       return 
}


if(!user){
    return redirect('/login')
}

}

Answer 1

为了仅在客户端运行此代码，您需要向中间件添加一些逻辑。查看文档以了解更多信息。

在通用模式下，中间件将在服务器端调用一次（在对 Nuxt 应用程序的第一次请求或页面刷新时），并在导航到更多路由时调用客户端。在 SPA 模式下，中间件将在第一个请求和导航到进一步路由时被称为客户端。

将以下内容添加到您的中间件函数中：

export default function({ store, redirect, route }) {

  // Do not run on server
  if (process.server) {
    return
  }

  const user = localStorage.getItem('user')
  const loggedStatus = store.getters['isLoggedIn']

  if (user) {
    if (route.path == '/login' || route.path == '/user/temporary') {
      return redirect('/')
    }
    return
  }

  if (!user) {
    return redirect('/login')
  }
}

如果您在 SPA 模式下运行，那么您就完成了。这个中间件只会在每次加载、初始和页面之间导航时在客户端上运行。

现在，如果你在通用模式下运行，这个中间件将不再在服务器上运行，但它也不会在第一次应用程序加载时运行。

在通用模式下，中间件将在服务器端调用一次（在对 Nuxt 应用程序的第一次请求或页面刷新时）和客户端在导航到更多路由时调用

解决此问题的最简单方法是添加一个仅在客户端上运行的插件。取自这个问题，将此插件添加到您nuxt.config.js的 .client 后缀：

// nuxt.config.js
export default {
  plugins: [
    // .client will only be run client side on initial app load
    '~/plugins/init.client.js'
  ]
}

在这个插件中，您可以定义与中间件相同的逻辑：

// /plugins/init.client.js
export default function({ store, redirect, route }) {

  const user = localStorage.getItem('user')
  const loggedStatus = store.getters['isLoggedIn']

  if (user) {
    if (route.path == '/login' || route.path == '/user/temporary') {
      return redirect('/')
    }
    return
  }

  if (!user) {
    return redirect('/login')
  }
}

这个例子与 DRY 原则背道而驰，旨在作为解决 Nuxt 中中间件限制的一个例子。

希望这可以帮助！