nuxt 目前最好的解决服务端存储Cookie的方法
我了解nuxt团队正在开发nuxtClientInit功能,但是在发布之前,您可以自己制作。要了解nuxt在有请求时承担的工作流程,您可以在此处查看其生命周期。这表明首先调用nuxtServerInit,然后再调用中间件。在此中间件调用期间,将提供nuxt.config.js,其中包含您的自定义配置。其中一部分是“插件”,如文档所述,通过此选项,您可以定义在实例化根Vue.js应用程序之前应...
我了解nuxt团队正在开发nuxtClientInit功能,但是在发布之前,您可以自己制作。要了解nuxt在有请求时承担的工作流程,您可以在此处查看其生命周期。这表明首先调用nuxtServerInit,然后再调用中间件。在此中间件调用期间,将提供nuxt.config.js,其中包含您的自定义配置。其中一部分是“插件”,如文档所述,
通过此选项,您可以定义在实例化根Vue.js应用程序之前应运行的JavaScript插件。
因此,如果您编写一个插件来调用存储操作,则可以从那里获取并设置本地存储。因此,从nuxt-client-init插件开始:
//nuxt-client-init.client.js
export default async context => {
await context.store.dispatch('nuxtClientInit', context)
}
然后将插件添加到nuxt.config.js:
//nuxt.config.js
plugins: [
'~/plugins/nuxt-client-init.client.js'
],
如果您注意到此处的命名约定,则插件的.client.js部分会告诉nuxt这是仅客户端的插件,并且是简写形式'{ src: '~/plugins/nuxt-client-init.js', mode: 'client' }'
,因为nuxt 2.4是定义old的方式'{ src: '~/plugins/nuxt-client-init.js', ssr: false }'
。无论如何,您现在都可以呼叫商店了,因此您可以采取措施从本地存储器呼叫并设置状态项。
//store/index.js
export const actions = {
nuxtClientInit({ commit }, { req }) {
const autho = localStorage.getItem('auth._token.local') //or whatever yours is called
commit('SET_AUTHO', autho)
console.log('From nuxtClientInit - '+autho)
}
}
您可能需要重新启动应用程序才能使它全部生效,但是随后您将获得并使用您的身份验证状态,而无需进行任何麻烦的nuxtServerInit业务。
更多推荐
所有评论(0)