如何在Nuxt.js中初始化状态,其中包括通用渲染时的localStorage



场景

首先,让我从我的流程开始
我正在localStorage中存储令牌(我知道我不应该这么做。)然后,每当我的Nuxt应用程序启动时,我想从localStorage获取令牌,使用API调用验证它,并相应地初始化状态。

问题

我正在使用服务器端渲染和Nuxt初始化状态服务器端。因此,localStorage在那里是不可访问的。

建议的变通办法

我创建了一个Action,它执行Scenario中解释的任务,该操作是从layouts/default.vue的mounted()触发的

有人可以建议一个更好的工作流程吗?或者可以验证这是否是正确的做事方式吗

您可以使用typeof window === 'undefined'来确定它是否在服务器端运行,并跳过您只想在客户端运行的代码,就像:

if (typeof window !== 'undefined') {
// your code
}

你可以在created/beforeCreate/asyncData中使用它,如果你的代码在mounted()中,你可能不需要这样做,以防这个生命周期挂钩只在客户端中运行。

您可以编写一个中间件并调度您的操作,检查其中的令牌并在布局中调用它。https://nuxtjs.org/docs/2.x/directory-structure/middleware

最新更新