在nuxt布局函数中获取localStorage数据答案

【问题标题】：Get localStorage data in nuxt layout function在nuxt布局函数中获取localStorage数据
【发布时间】：2021-08-04 15:20:40
【问题描述】：

我有这样一个问题：在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 数据？或者您可以向我推荐任何包，以便我可以在布局功能中使用它？

【问题讨论】：

顺便说一句，你在这里使用layout？ nuxtjs.org/docs/2.x/components-glossary/pages-layout你不是说middleware()吗？ nuxtjs.org/docs/2.x/components-glossary/…
是的，我使用layout，我需要从localStorage中获取profileData来选择接下来要加载的布局
另外，更喜欢使用async/await 语法而不是.then。通常建议这样做。
我不知道它是否对你有帮助，但我主要使用通用存储来设置和检索令牌，使用 $storage.setUniversal() 和 $storage.getUniversal() 方法。 github.com/nuxt-community/universal-storage-module
@AmirhosseinShahbazi 感觉就像一个火箭筒，但很高兴看到这种解决方案确实存在。您可能应该将此作为答案发布，以便它可以被 OP 接受和投票！

标签： javascript vue.js nuxt.js vuex

【解决方案1】：

我找到了解决办法：

我刚刚安装了nuxt-universal-storage module，这是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
}

【讨论】：

所以，您可能在某些时候在这里使用 cookie。很高兴这个解决方案有效，同时我仍然不确定为什么所有这些代码都在 layout() 中，这不是它的目的。您是否在最后呈现 'blog' 字符串或类似的字符串？如果不是，这应该是一个中间件，尤其是看$router.push。
是的，当然，我在最后返回字符串。我只是检查现在 Vuex 状态是什么角色，然后选择要渲染的布局:) 谢谢你的帮助。所以我把多余的代码移到了中间件，现在我的布局只有一些ifs，在这里我选择最后返回的字符串
我仍然坚持使用动态布局而不是动态更改布局。您可以在布局中设置条件。至少，我确实更喜欢这种方法。

【解决方案2】：

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

如果是这样，您将无权访问 localStorage。服务器端没有在您的浏览器中运行！

【讨论】：

【解决方案3】：

这种代码可以正常工作

<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）。

【讨论】：

这个条件里面的代码没有运行
不确定您希望在return 'blog' 或layout() 内部的类似内容之外运行什么。
我需要在localStorage中定义用户角色来选择接下来要加载的布局
我不知道为什么，但是process.client条件里面的代码在我重新加载页面时不起作用，但是在重新渲染组件时它起作用
也许我可以检查middleware中的localStorage，如果localStorage不为空，将数据推送到Vuex。然后在布局里面检查 Vuex 状态？还是那样不行？

【解决方案4】：

您可以使用cookie-universal-nuxt

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

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

你可以在布局函数中访问它

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

【讨论】：