Question

我正在研究nuxt.js项目。在这里，我想在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

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

在通用模式下，一次（在对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应用程序的第一个请求或页面刷新时），以及在导航至其他路由时被称为客户端

解决此问题的最简单方法是还添加一个仅在客户端上运行的插件。从this问题开始，将此插件添加到您的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中中间件局限性的示例。

希望这会有所帮助！

Answer 2

在nuxtjs中可以直接使用localStorage。

this.$auth.$storage.setLocalStorage(key, val)
this.$auth.$storage.getLocalStorage(key)
this.$auth.$storage.removeLocalStorage(key)

查看文档 here

如何在Nuxt.js存储中使用localStorage

2 个答案: