Nuxt auth 및 axios를 사용할 때 Javascript 힙 부족

Aug 29 2020

익스프레스 서버 미들웨어를 사용하는 Nuxt 앱에서 로컬 로그인을 구현하려고합니다.

다음 모듈을 사용하고 있습니다.

nuxt 인증
도끼
패스포트, 패스포트-로컬, 패스포트-로컬-몽구스, 패스포트 세션
익스프레스 세션

그러나 내 앱에서 nuxt 인증을 설정하자마자 전체 앱이 응답하지 않는 것 같습니다. 내 응용 프로그램의 페이지 (로그인 및 등록 페이지도 아님)에 액세스 할 수 없습니다. 잠시 동안 서버를 실행 한 후 이것이 내가 보는 것입니다.https://i.stack.imgur.com/pl0Li.png

auth: {
redirect: {
  login: "/login", // User will be redirected to this path if login is required.
  home: "/", // User will be redirect to this path after login. (rewriteRedirects will rewrite this path)
  logout: "/login", // User will be redirected to this path if after logout, current route is protected.
  user: "/user",
  callback: "/",
},
strategies: {
  local: {
    endpoints: {
      login: {
        url: "/api/login",
        method: "post",
        propertyName: "token",
      },
      logout: { url: "/api/logout", method: "post" },
      user: { url: "/", method: "get", propertyName: "user" },
    },
    tokenRequired: true, //True by default
    tokenType: "bearer",
    // globalToken: true,
    // autoFetchUser: true
  },
},

에 따라 https://github.com/nuxt-community/auth-module/issues/286#issuecomment-461138282, 서버 미들웨어에 대한 요청이이 오류의 원인이 될 수 있습니까?

API를위한 별도의 서버가 있어야합니까?

답변

Besto Sep 03 2020 at 00:39

나는 같은 문제에 직면하고 있습니다. 제 경우 문제는 다음 인증 구성에 있습니다. nuxt : 2.14.3을 새로 설치할 때 발생하므로 오류를 쉽게 재현 할 수 있습니다. 이 구성을 추가하면 앱이 충돌합니다. @ nuxt / auth-next : ^ 5.0.0-1595976864.509d9d6을 사용하고 있습니다.

// nuxt.config.js
auth: {
    strategies: {
      cookie: {
        cookie: {
          name: 'session',
        },
        endpoints: {
            login: { url: '/api/login', method: 'post' },
            logout: { url: '/api/logout', method: 'post' }
        }
      }
    }
 },

isahitya Sep 03 2020 at 17:11

내 문제를 해결했습니다. nuxt-auth에서 다음 문제에 직면했습니다.https://github.com/nuxt-community/auth-module/issues/286동일한 서버에 인증 서비스와 nuxt가 있었기 때문에 nuxt 인증 모듈이 무한 루프로 이동했습니다 (위 링크에서 자세한 내용 참조). 그래서 API 서비스와 SSR (nuxt)을위한 별도의 서버를 만들었습니다.

다음은 내 nuxt-auth 구성이며 큰 차이는 아닙니다.

  auth: {
redirect: {
  login: "/register", 
  home: "/", 
  logout: "/register",
  user: "/user",
  callback: "/",
},
strategies: {
  local: {
    endpoints: {
      login: {
        url: "/login",
        method: "post",
        propertyName: "token",
      },
      logout: { url: "/logout", method: "post" },
      user: { url: "/user", method: "get", propertyName: "user" },
    },
    tokenRequired: false, 
    tokenType: false, 
  },
},

더 중요한 것은 여기 내 axios 구성입니다. 다른 서버에 요청하고 있습니다.

axios: {
baseURL: "http://localhost:5000/",
credentials: true,
init(axios) {
  axios.defaults.withCredentials = true;
},

이제 원래 문제와 관련이없는 것이 있습니다. 페이지 미들웨어에서 API 요청을하는 경우 적절한 쿠키가 전송되는지 확인하십시오.

이 링크를 참조하십시오. https://github.com/nuxt/nuxt.js/issues/454페이지 미들웨어는 SSR의 서버 측에서 실행될 수 있으므로 쿠키를 사용할 수 없습니다. 서버 측에서 쿠키를 사용할 수 있도록하는 모듈이 있습니다. 그러나 그 대신 브라우저에서 실행되는 메서드 인 Ex. 생성, 가져 오기 등