如何在通用渲染时在 Nuxt.js 中初始化 state，其中包括 localStorage

Question

设想

首先，让我从我的流程开始。
我将令牌存储在 localStorage 中（我知道我不应该这样做。）然后，每当我的 Nuxt 应用程序启动时，我想从 localStorage 获取令牌，使用 API 调用验证它，并相应地初始化 state。

问题

我正在使用服务器端渲染和 Nuxt 初始化 state 服务器端。 因此，localStorage 在那里无法访问。

建议的解决方法

我创建了一个动作，它执行Scenario中解释的任务，并且该动作是从layouts/default.vue的 mount() 触发的

任何人都可以建议更好的工作流程或可以验证这是正确的做事方式吗？

Answer 1

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

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

你可以在created / beforeCreate / asyncData中使用它，如果你的代码在mounted()中，你可能不需要这样做，'如果这个 Lifecycle Hooks 只在客户端运行。

Answer 2

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