本地存储未定义答案

【问题标题】：Localstorage not defined本地存储未定义
【发布时间】：2020-02-18 11:40:26
【问题描述】：

我正在将 Nuxt.js 用于 SSR。每当我登录我的应用程序时，我都有一个登录系统，我得到一个 JSON Web 令牌 (JWT) 并将其存储在我的 Localstorage 中。

现在的问题是 SSR。每当我尝试访问 Localstorage 时，它都会说它没有定义。我找到了一篇关于这个问题的 Stackoverflow 文章，因为代码是服务器端渲染的，所以它无法访问本地存储。

我尝试了created() 生命周期钩子来检查本地存储中是否存在令牌，但没有成功。我也试过nuxtServerInit 也没有成功。

如何检查客户端的本地存储中是否存在令牌或有更好的主意？

【问题讨论】：

检查本地存储是否真的存在。按 f12 并转到应用程序选项卡，您将在那里看到本地存储。它将向您显示站点、键和值。顺便说一句，你是如何使用本地存储的？
服务器端代码不能直接看到 Javascript 本地存储，你需要客户端以某种方式发送它，cookie / ajax / websocket 等，甚至是表单发布。
@RenatoManalili 这不是问题，每当我登录时，我都会从后端检索一个 jwt 并将其保存在我的本地存储中。而且我知道如何检查它是否存在，问题是 nuxtjs 是服务器端渲染的，因此它无法访问本地存储。我想检查页面加载上是否存在令牌
@ilijanovic 哦，我明白了，如果你使用 vuex 会更好。
@RenatoManalili 我使用 vuex，每次刷新后都会刷新存储，所以我需要在每次页面刷新后再次登录。现在我正在使用 vuex 并想改进应用程序

标签： javascript vue.js jwt

【解决方案1】：

你可以在mounted上调用一个函数

export default {
  mounted() {
    this.storage();
  },
  methods:{
    storage(){
       localStorage.getItem("authToken");
    }
  }
}

或使用 created 和 process.browser 检查

export default {
  created() {
    this.storage();
  },
  methods:{
    storage(){
      if (process.browser){
          localStorage.getItem("authToken");
      }
    }
  }
}

【讨论】：

问题是从存储中检索数据。它不能，因为 nuxt 是在服务器端呈现的
完美。 process.browser 完全符合我的要求，谢谢