Javascript ha esaurito la memoria quando si utilizzano Nuxt auth e axios

Question

Sto cercando di implementare l'accesso locale nella mia app Nuxt che utilizza il middleware del server Express.

Sto usando i seguenti moduli

1. nuxt auth
2. axios
3. passport, passport-local, passport-local-mongoose, passport-session
4. sessione espressa

Ma non appena ho impostato l'autenticazione nuxt nella mia app, l'intera app sembra smettere di rispondere. Non riesco ad accedere a nessuna pagina (nemmeno alla pagina di login e registrazione) della mia applicazione. Dopo aver eseguito il server per un po ', questo è quello che vedo.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
  },
},

},

Come da https://github.com/nuxt-community/auth-module/issues/286#issuecomment-461138282, le richieste al middleware del server possono essere la causa di questo errore?

Dovrei avere un server separato per api?

Answer 1

Sono di fronte allo stesso problema. Nel mio caso il problema risiede nella seguente configurazione di autenticazione. Succede su una nuova installazione di nuxt: 2.14.3, quindi dovrebbe essere facile riprodurre l'errore. La semplice aggiunta di questa configurazione provoca l'arresto anomalo dell'app. Sto usando @ 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' }
        }
      }
    }
 },

Answer 2

Ho risolto il mio problema. Stavo affrontando il seguente problema con nuxt-authhttps://github.com/nuxt-community/auth-module/issues/286Avevo i miei servizi di autenticazione e nuxt sullo stesso server, questo ha fatto sì che il modulo di autenticazione nuxt andasse in un ciclo infinito (maggiori dettagli nel collegamento sopra). Quindi ho creato server separati per i servizi API e SSR (nuxt).

Di seguito è la mia configurazione nuxt-auth, non molta differenza.

  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, 
  },
},

},

Ancora più importante , ecco la mia configurazione axios. Notare che sto facendo una richiesta a un altro server.

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

},

Ora qualcosa non correlato al problema originale, assicurati anche che se stai effettuando richieste API dal middleware della pagina, vengano inviati i cookie appropriati.

Vedi questo link, https://github.com/nuxt/nuxt.js/issues/454Poiché il middleware della pagina può essere eseguito sul lato server in SSR, i cookie potrebbero non essere disponibili lì. Esistono moduli che rendono disponibili i cookie lato server. Ma invece di ciò, puoi semplicemente inserire le tue richieste API in un metodo eseguito nel browser, ad es. creato, recuperare ecc.

Scusa se sto scrivendo questa risposta in fretta, la migliorerò più tardi.