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

bpzcxfmw  于 2023-02-05  发布在  Vue.js
关注(0)|答案(5)|浏览(554)

如你所知,nuxtjs是服务器端呈现,没有很好的例子来说明如何将数据存储到客户端的本地存储中。
我的工作是需要建立登录表单,用户可以把用户名和密码的形式发送到服务器(通过api)检查,如果登录数据是正确的,api将返回一个令牌密钥,然后我将存储这个密钥,以验证用户是auten和使用它与其他api。
我找到了一些例子,但在这里用vuejs构建https://auth0.com/blog/build-an-app-with-vuejs/,但我不知道如何将其更改为nuxtjs。
任何我读过的https://github.com/robinvdvleuten/vuex-persistedstate,我可以插入到我的项目,但我想看到其他的解决方案。
问候。

xqkwcwgp

xqkwcwgp1#

Nuxt提供process.client来告诉您只在客户端执行
因此可以这样使用它:

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

查看此链接了解更多信息。

nlejzf6q

nlejzf6q2#

您可以使用process.client检查它是否位于客户端。

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

您还可以在mounted中调用此方法,而不检查process.client

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

zsbz8rwp3#

派对来晚了点,但我也有类似的问题。
但首先我建议你使用cookie来保存key/token/jwt。原因是localStorage可以通过JS API被劫持,cookie可以被保护。但是你必须保护你的token不受CSFR的攻击。这可以通过查看服务器端的Refence和Origin头来完成。这个家伙写了一篇很好的文章来说明如何做到这一点:How to protect your HTTP Cookies
至于从Nuxt访问localStorage,我们开始:
如果你运行的是Nuxt,并且没有告诉它在spa模式下运行,它将在通用模式下运行。Nuxt定义通用模式为:
同构应用程序(服务器端渲染+客户端导航)
结果是localStorage没有在服务器端定义,因此抛出错误。
对我来说,中间件文件和Vuex的控制台日志记录输出到终端,而不是浏览器中开发人员工具的控制台。
如果您想了解更多关于我解决方案的信息,可以在这里找到:本地存储与Nuxt的模式

qxsslcnc

qxsslcnc4#

如果您打算存储少量的数据,低于4096字节,您可以使用cookie。我推荐库cookie-universal-nuxt

npm install cookie-universal-nuxt --save

nuxt.config.js

modules: [
    'cookie-universal-nuxt',
],

然后您可以使用:

const data = {
    anything: 'you want',
}

this.$cookies.set('thing', data, {
    path: '/',
    maxAge: 60 * 60 * 24 * 7
});

this.$cookies.get('thing');

如果你需要的话,请阅读图书馆的文档。
cookie将在服务器端可用,因此您可以绕过localStorage的问题。
请注意,每个cookie最多只能存储4096字节。
例如,我在Vuex的nuxtServerInit函数中获取cookie数据,然后这些数据在应用服务器端的任何地方都可用。

ymzxtsji

ymzxtsji5#

您可以使用const page = useState(()=〉 数据
我知道这有点晚了,它可能不是你正在寻找的答案...但它可能对某人有帮助...我在阅读了许多文档和其他答案后了解到,你不能使用本地或会话存储。在开发中,它只是在你改变路径时运行,但当你刷新页面或组件时,使用会话存储时,它会抛出错误***“sessionStorage is not defined”***..如果你不打算像会话或本地那样长时间存储数据...你可以使用***useState(()=〉data)***nuxt提供的属性..它会存储你的数据直到你刷新你的网页...

相关问题