Question

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

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

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

我已阅读https://github.com/robinvdvleuten/vuex-persistedstate，我可以插入我的项目，但我希望看到其他解决方案。

的问候。

Answer 1

nuxtjs为您提供process.browser，告诉它仅在客户端执行

所以像这样使用它：

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

请参阅此link了解详情

Answer 2

您可以使用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 3

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

但是首先，我建议您使用cookie来保存密钥/令牌/ jwt。原因是localStorage可以通过JS API劫持，因此可以保护cookie。但是，您将必须保护令牌免受CSFR的侵害。可以通过查看Refence和Origin标头服务器端来完成。这个人写了一篇很棒的文章：How to protect your HTTP Cookies

关于从Nuxt访问localStorage，我们去：

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

同构应用程序（服务器端呈现+客户端导航）

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

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

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

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

3 个答案: