nuxt布局函数中获取localStorage数据

Question

我有这样的问题：在pages/index.vue

中加载nuxt布局之前，我需要获取localStorage数据

/pages/index.vue

<script>
export default {
  layout (context) {
    if (localStorage.getItem('AUTH_TOKEN')){
      this.$store.dispatch('changeAuthStatus', {
        authStatus: true,
        accessToken: localStorage.getItem('AUTH_TOKEN'),
        profileData: JSON.parse(localStorage.getItem('PROFILE_DATA'))
      }).then(() => {
        this.$store.dispatch('changeLoadedStatus', {
          isLoaded: true
        })
      })
    }
    else {
      this.$router.push('/auth')
    }
  }
</script>

页面加载时的错误：localStorage is not defined

也许我可以使用上下文获取 localStorage 数据？或者你可以向我推荐任何包，以便我可以在布局功能中使用它？

Answer 1

如果我没记错的话，Nuxt 是 Vue 的 SSR 解决方案（与 React 的 Next 相同），对吧？

如果是，则您无权访问 localStorage。服务器端不在您的浏览器中运行！

Answer 2

这种代码工作正常

<script>
export default {
  layout({ store }) {
    if (process.client) {
      console.log('localStorage?', localStorage.getItem('myCat'))
      console.log('store?', store)
    }
  },
}
</script>

因为 localStorage 在服务器上不可用。

尝试使用 localStorage.setItem('myCat', 'Tom')，转到您的页面，看看它如何显示 localStorage 和商店（不要忘记使用 the context，因为 this此处不可用）。

Answer 3

我找到了解决方案：

我刚安装nuxt-universal-storage module, that Amirhossein Shahbazi提示。所以我刚刚做了这个：

/pages/index.vue:

<script>
export default {
middleware: ['auth'],
  layout (context) {
    let currentRole = context.app.$storage.getUniversal('PROFILE_DATA')
    console.log(currentRole)
    let currentLayout = 'default'
    let defaultRoles = ['customer_support_manager', 'checker', 'storekeeper']
    let tabletRoles = ['deputy_cutting_shop']
    if (defaultRoles.includes(currentRole.role)) {
      currentLayout = 'default'
    }
    else if (tabletRoles.includes(currentRole.role)) {
      currentLayout = 'tablet'
    }
    return currentLayout
}
</script>

/middleware/auth.js:

export default function ({ redirect, app, store }) {
    // some token checkers for existing, for 401 error and for their validity
}

Answer 4

您可以使用cookie-universal-nuxt

登录后您可以将“AUTH_TOKEN”设置为 cookie 而不是 localStorage

window.$cookies.set('AUTH_TOKEN', token)

您可以在布局函数中访问它，如

layout (context) {
     let token=context.app.$cookies.get('AUTH_TOKEN')
}

nuxt布局函数中获取localStorage数据

Get localStorage data in nuxt layout function

javascript

vue.js

vuex

nuxt.js