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

Question

Scenario

First of all, let me start with my flow.
I am storing token in localStorage (I know I shouldn't do it.) Then, whenever my Nuxt App is started, I want to fetch token from localStorage, verify it using API call, and initialise state accordingly.

Problem

I am using Server Side Rendering and Nuxt initialises state Server Side. Thus, localStorage is not accessible there.

Proposed Workaround

I created an Action which does task explained in Scenario and that action is triggered from mounted() of layouts/default.vue

Can Anyone Please suggest a Better Workflow or Can Verify Wether this is Correct Way of doing things?

Answer 1

you can use typeof window === 'undefined' to determine if it running in Server Side, and skip the code you only want to run in client, just like:

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

You can use it in created / beforeCreate / asyncData , And if you code is in mounted(), you may not need do this, 'case this Lifecycle Hooks only run in the client.

Answer 2

You can write a Middleware and dispatch your action that checks the token in it and call it in the layout. https://nuxtjs.org/docs/2.x/directory-structure/middleware