如您所知，nuxtjs 是服务器端渲染，没有很好的示例如何将数据存储到客户端的本地存储中。
我的工作是需要建立登录表单，用户可以将用户名和密码放入表单中，然后将其发送到服务器（通过 api）进行检查，如果登录数据正确，api 将返回一个令牌密钥，然后我将存储验证此密钥是用户是 authen 并将其与其他 api 一起使用。
我找到了一些示例，但在这里使用 vuejs 构建 https://auth0.com/blog/build-an-app-with-vuejs/ 但我不知道如何将其更改为 nuxtjs。
任何我读过的https://github.com/robinvdvleuten/vuex-persistedstate 都可以插入到我的项目中，但我希望看到其他解决方案。
问候。
【问题讨论】：
标签： authentication vue.js nuxt.js
Nuxt 为您提供process.client 告诉它只在客户端执行
所以像这样使用它：
methods: {
storeToken(token) {
if(process.client) {
localStorage.setItem("authToken", token)
}
}
}
查看此link 了解更多信息。
【讨论】：
process.browser。
您可以使用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);
}
}
}
【讨论】：
process.browser。
聚会有点晚了，但我遇到了类似的问题。
但首先我建议您使用 cookie 来保存密钥/令牌/jwt。 原因是可以通过 JS api 劫持 localStorage，并且可以保护 cookie。但是，您必须保护您的令牌免受 CSFR 的影响。 这可以通过查看 Refence 和 Origin 标头服务器端来完成。 这家伙写了一篇关于如何做到这一点的好帖子：How to protect your HTTP Cookies
至于从 Nuxt 访问 localStorage，我们开始：
如果您正在运行 Nuxt 并且没有告诉它以 spa 模式运行，它将以通用模式运行。 Nuxt 将通用模式定义为：
同构应用（服务器端渲染+客户端导航）
结果是 localStorage 未在服务器端定义，因此引发错误。
给我的好处是控制台日志从中间件文件和 Vuex 输出到终端，而不是浏览器中开发人员工具中的控制台。
如果您想了解更多关于我的解决方案的信息，可以在这里找到：localStorage versus Nuxt's modes
【讨论】：
如果您计划存储少量数据（低于 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 数据，然后数据在应用服务器端的任何地方都可用。
【讨论】：