如何使用Nuxt.js将数据存储到本地存储

Question

如您所知，nuxtjs是服务器端渲染，没有很好的示例如何将数据存储到客户端的localstorage中。

我的工作是建立登录表单，用户可以在其中输入用户名和密码，然后将其发送到服务器（通过api）进行检查，如果登录数据正确，则api将返回一个令牌密钥，然后将该密钥存储到验证用户是否已通过身份验证，并将其与其他api一起使用。

我找到了一些示例，但是在这里使用vuejs进行构建https://auth0.com/blog/build-an-app-with-vuejs/，但是我不知道如何将其更改为nuxtjs。

我已经阅读了https://github.com/robinvdvleuten/vuex-persistedstate的任何内容，都可以插入到我的项目中，但是我想查看其他解决方案。

问候。

Answer 1

您可以使用process.browser它来检查它是否在浏览器中。

export default {
  created() {
    this.storeToken();
  },
  methods:{
    storeToken(token){
      if(process.browser){
          localStorage.setItem("authToken", token);
      }
    }
  }
}

您也可以在没有检查的情况下调用此方法process.browser。

export default {
  mounted() {
    this.storeToken();
  },
  methods:{
    storeToken(token){
       localStorage.setItem("authToken", token);
    }
  }
}

Answer 2

聚会有点晚了，但我也遇到了类似的问题。

但首先我建议您使用 cookie 来保存密钥/令牌/jwt。原因是 localStorage 可以通过 JS api 被劫持，并且可以保护 cookie 免受这种情况的影响。但是，您必须保护您的代币免受 CSFR 的侵害。这可以通过查看 Refence 和 Origin headers 服务器端来完成。这个人写了一篇关于如何做到这一点的好文章：How to protected your HTTP Cookies

至于从 Nuxt 访问 localStorage，我们如下：

如果您正在运行 Nuxt 并且没有告诉它在 spa 模式下运行，它将在通用模式下运行。Nuxt 将通用模式定义为：

同构应用（服务器端渲染+客户端导航）

结果是 localStorage 未在服务器端定义，因此会引发错误。

对我来说，中间件文件和 Vuex 的控制台日志输出到终端，而不是浏览器中开发人员工具中的控制台。

如果您想了解有关我的解决方案的更多信息，可以在这里找到：localStorage 与 Nuxt 的模式

Answer 3

nuxtjs为您提供process.browser了告诉它仅在客户端执行的功能

所以像这样使用它：

methods:{
    storeToken(token){
        if(process.browser){
            localStorage.setItem("authToken", token);
        }
    }
}

查看此链接以获取更多信息