Nuxt Vuex商店Cookie发行

vue.js Vue.js

Davaid前端

2020-03-23

一天的好时光!

在我的项目进行了几周的开发之后,我决定从普通的Vue迁移到Nuxt。

主要是因为我需要SSR,尽管我知道Google可以执行页面上显示的JS,因此可以为其搜索机器人生成适当的内容。

另一个原因是项目开发的一般工作流程。我喜欢自动实例化路线,商店等的想法。

但是,当我在mode: universal而不是中运行应用程序时,我遇到了一个非常奇怪的行为mode: spamode: spa从那时起,我就不想再切换到SSR了。

我在商店中有一个帐户模块- account.js负责处理与帐户管理相关的任何操作,例如登录/注销,获取经过身份验证的用户的个人资料,存储从登录请求中获得的令牌以及处理逻辑2FA TOTP程序。

在我的旧版应用程序中,我只需使用以下代码就可以从cookie中获取令牌

import Cookies from 'js-cookie';

export const state = {
   user: null,
   token: Cookies.get('token')
}

通过执行以下更改,在成功认证之后保存令牌:

[types.ACCOUNT_SAVE_TOKEN] (state, { token, remember }) {
    state.token = token;
    Cookies.set('token', token, {
      expires: 365,
      httpOnly: true
    });
}

但是在迁移到Nuxt.js之后,每次登录时,都会填充该状态中的令牌值,但未设置cookie,并且导航到项目内的另一页(它是pwa,因此无需重新加载等) )令牌重置为空。

This issue however is gone if application is switched to the mode: spa from mode: universal and everything is working just fine.

I've read many issues on the github as well as done pretty big portion of crawling throught the websites which are trying to solve the same issue, though none of the suggestions are working for me.

I've even installed the cookie-universal-nuxt package from NPM which claims to be working with the SSR, but yet every time I'm trying to access this.$cookies.get('token') in the state, or anywhere else (mutations for example), I'm just getting error about using the method (get/set/remove) on null.

Does anyone know or have an idea on how to overcome this issue, at least if it is possible without going back to the mode: spa?

在时,PS Running会npm run build|generate产生与普通vue相同的文件(不包含内容,只是结构,直到重新读取目标元素为止)mode: spa

第2875篇《Nuxt Vuex商店Cookie发行》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android