nuxt 目前最好的解决服务端存储Cookie的方法

原文：https://blog.csdn.net/qq_41810005/article/details/102587474

我了解nuxt团队正在开发nuxtClientInit功能，但是在发布之前，您可以自己制作。要了解nuxt在有请求时承担的工作流程，您可以在此处查看其生命周期。这表明首先调用nuxtServerInit，然后再调用中间件。在此中间件调用期间，将提供nuxt.config.js，其中包含您的自定义配置。其中一部分是“插件”，如文档所述，

通过此选项，您可以定义在实例化根Vue.js应用程序之前应运行的JavaScript插件。

因此，如果您编写一个插件来调用存储操作，则可以从那里获取并设置本地存储。因此，从nuxt-client-init插件开始：

1.  
   //nuxt-client-init.client.js
2.  
   export default async context => {
3.  
   await context.store.dispatch('nuxtClientInit', context)
4.  
   }

然后将插件添加到nuxt.config.js：

1.  
   //nuxt.config.js
2.  
   plugins: [
3.  
   '~/plugins/nuxt-client-init.client.js'
4.  
   ],

如果您注意到此处的命名约定，则插件的.client.js部分会告诉nuxt这是仅客户端的插件，并且是简写形式'{ src: '~/plugins/nuxt-client-init.js', mode: 'client' }'，因为nuxt 2.4是定义old的方式'{ src: '~/plugins/nuxt-client-init.js', ssr: false }'。无论如何，您现在都可以呼叫商店了，因此您可以采取措施从本地存储器呼叫并设置状态项。

1.  
   //store/index.js
2.  
   export const actions = {
3.  
   nuxtClientInit({ commit }, { req }) {
4.  
   const autho = localStorage.getItem('auth._token.local') //or whatever yours is called
5.  
   commit('SET_AUTHO', autho)
6.  
   console.log('From nuxtClientInit - '+autho)
7.  
   }
8.  
   }

您可能需要重新启动应用程序才能使它全部生效，但是随后您将获得并使用您的身份验证状态，而无需进行任何麻烦的nuxtServerInit业务。