Nuxt Vuex 스토어 쿠키 문제

Nuxt Vuex 스토어 쿠키 문제

하루 중 좋은 시간이야!

몇 주간의 프로젝트 개발 끝에 플레인 Vue에서 Nuxt로 이행하기로 결정했습니다.

주로 SSR가 필요하지만 Google이 페이지에 표시된 JS를 실행할 수 있기 때문에 검색 봇에 적합한 콘텐츠를 생성할 수 있습니다.

또 다른 이유는 프로젝트 개발의 일반적인 워크플로우입니다.노선, 점포 등의 자동 인스턴스화 아이디어가 마음에 듭니다.

그러나 나는, 어플리케이션이 실행 중일 때 어플리케이션의 동작은 매우 이상했습니다한 응용 프로그램은 단에서 뛰어놀고는 꽤 이상한 행동을 직면했던.mode: universal대신 대신mode: spa. 그리고 그리고로 전환하는 것 다른싶지도 않고 바꾸고 곳으로고 싶지 않다.mode: spa그 이후로 나는 의뢰가 나는 1위에 이주하는 것을 잃는다.그 이후로 나는 내가 이행하던 SSR를 잃었다.

나는 그 가게-매장에 어카운트모듈이 있습니다의 계좌에 모듈을 가지고 있다.account.js어느 login/logout, 인증 사용자 중 프로필, 가게는 토큰이 로그인 요청뿐만 아니라2FA TOTP 절차를 처리하기 위한 논리로 얻은 같은 작업은 계정 관리와 관련된, 취급에 책임이 있다.로그인/로그아웃,인증된사용자의 프로파일 취득, 로그인 요청에서 얻은 토큰 및 2FA TOTP 절차를 처리하기 위한 로직 등 계정 관리와 관련된 모든 작업을 처리합니다.

레거시 어플리케이션에서는 다음 코드만 사용하여 쿠키에서 토큰을 얻을 수 있었습니다.

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로 이행한 후 로그인 할 때마다 상태 토큰 값이 채워지지만 쿠키가 설정되지 않으며 프로젝트 내의 다른 페이지(pwa이므로 새로고침하지 않음 등)로 이동한 후에는 토큰이 null로 리셋됩니다.

만약 응용 프로그램이 단에, 어플리케이션이 로 전환되면 이 문제는 해소됩니다가 이 문제 하지만 사라진다.mode: spa부터에서mode: universal그리고 모든 것이 단지 멋지게 일하고 있다.모든 게 잘 되고 있어요

저는 GITHUB에서 많은 이슈를 읽었을 뿐만 아니라 같은 문제를 해결하기 위해 노력하고 있는 웹사이트를 탐색하는 데 많은 부분을 했습니다만, 어떤 제안도 제게는 효과가 없습니다.

SSR와 함께 작동한다고 주장하는 NPM의 cookie-universal-nuxt 패키지도 설치했습니다만, 매번 액세스하려고 합니다.this.$cookies.get('token')주, 혹은 그 밖의 다른어느 곳(예를 들어 돌연변이)에서는, 그냥 상태 또는 다른 곳(예:평판)에서 메서드(get/set/remove)를 사용하는 것에 대해 오류가 발생하고 있습니다의 메서드(get/set/remove)사용에 대한 오류를 준비하고 있다.null..

적어도 만약 그것이 다시는 이에 문제를 해결할 수 있는 방법을 알고 있거나 알고 있는사람이 있습니까 것 없이도 가능하다 누구거나, 어떻게 이 문제를 극복할지에 대한 생각을 아는가?면도면면면면면면면면면면면면면면면mode: spa?

추신: 실행 중npm run build|generate는, 통상적인 vue 와 같은 파일을 생성합니다(컨텐츠는 없고, 타겟 요소가 재치될 때까지의 구조만).mode: spa.

네, 약 12시간 동안 이 문제에 대해 머리를 싸매고 나서, 저는 '더러운' 방법으로 미들웨어를 만들기로 결정했습니다. 제 생각에는, 각각의 요청에 대해 많은 처리를 하고 있습니다.

import CookieParser from 'cookieparser';

export default async function ({ store, req }) {
  if (!store.getters['account/check']) {
    if (!store.state.account.token) {
      if (process.server) {
        let requestCookies = CookieParser.parse(req.headers.cookie);
        if (requestCookies.hasOwnProperty('token')) {
          store.dispatch('account/saveToken', {
            token: requestCookies.token,
            remember: true
          });
        }
      }
    }
    if (store.state.account.token) {
      if (!store.state.account.user) {
         try {
           await store.dispatch('account/fetchUser');
         } catch (error) { }
      }
    }
  }
  return Promise.resolve();
}

언급URL : https://stackoverflow.com/questions/50847518/nuxt-vuex-store-cookies-issue