如你所知,nuxtjs是服务器端呈现,没有很好的例子来说明如何将数据存储到客户端的本地存储中。
我的工作是需要建立登录表单,用户可以把用户名和密码的形式发送到服务器(通过api)检查,如果登录数据是正确的,api将返回一个令牌密钥,然后我将存储这个密钥,以验证用户是auten和使用它与其他api。
我找到了一些例子,但在这里用vuejs构建https://auth0.com/blog/build-an-app-with-vuejs/,但我不知道如何将其更改为nuxtjs。
任何我读过的https://github.com/robinvdvleuten/vuex-persistedstate,我可以插入到我的项目,但我想看到其他的解决方案。
问候。
5条答案
按热度按时间xqkwcwgp1#
Nuxt提供
process.client
来告诉您只在客户端执行因此可以这样使用它:
查看此链接了解更多信息。
nlejzf6q2#
您可以使用
process.client
检查它是否位于客户端。您还可以在mounted中调用此方法,而不检查
process.client
。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的模式
qxsslcnc4#
如果您打算存储少量的数据,低于4096字节,您可以使用cookie。我推荐库
cookie-universal-nuxt
。nuxt.config.js
然后您可以使用:
如果你需要的话,请阅读图书馆的文档。
cookie将在服务器端可用,因此您可以绕过localStorage的问题。
请注意,每个cookie最多只能存储4096字节。
例如,我在Vuex的
nuxtServerInit
函数中获取cookie数据,然后这些数据在应用服务器端的任何地方都可用。ymzxtsji5#
您可以使用const page = useState(()=〉 数据 )
我知道这有点晚了,它可能不是你正在寻找的答案...但它可能对某人有帮助...我在阅读了许多文档和其他答案后了解到,你不能使用本地或会话存储。在开发中,它只是在你改变路径时运行,但当你刷新页面或组件时,使用会话存储时,它会抛出错误***“sessionStorage is not defined”***..如果你不打算像会话或本地那样长时间存储数据...你可以使用***useState(()=〉data)***nuxt提供的属性..它会存储你的数据直到你刷新你的网页...