Pilha de Javascript sem memória ao usar Nuxt auth e axios

Question

Estou tentando implementar o login local em meu aplicativo Nuxt que usa middleware de servidor expresso.

Estou usando os seguintes módulos

1. nuxt auth
2. axios
3. passaporte, passaporte-local, passaporte-local-mangusto, passaporte-sessão
4. sessão expressa

Mas assim que configuro o nuxt auth no meu aplicativo, todo o aplicativo parece parar de responder. Não consigo acessar nenhuma página (nem mesmo a página de login e registro) do meu aplicativo. Depois de rodar o servidor por um tempo, é isso que vejo.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
  },
},

},

Conforme https://github.com/nuxt-community/auth-module/issues/286#issuecomment-461138282, fazer solicitações ao middleware do servidor pode ser a causa desse erro?

Devo ter um servidor separado para api?

Answer 1

Estou enfrentando o mesmo problema. No meu caso, o problema está na seguinte configuração de autenticação. Isso acontece em uma nova instalação do nuxt: 2.14.3 e, portanto, deve ser fácil reproduzir o erro. Apenas adicionar essa configuração trava o aplicativo. Estou 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

Resolvi meu problema. Eu estava enfrentando o seguinte problema com o nuxt-authhttps://github.com/nuxt-community/auth-module/issues/286Eu tinha meus serviços de autenticação e nuxt no mesmo servidor, o que fez com que o módulo nuxt auth entrasse em um loop infinito (mais detalhes no link acima). Portanto , criei servidores separados para os serviços de API e SSR (nuxt).

A seguir está minha configuração nuxt-auth, não há muita diferença.

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

},

Mais importante , aqui está minha configuração de axios. Observe que estou fazendo uma solicitação a um servidor diferente.

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

},

Agora, algo não relacionado ao problema original, certifique-se também de que, se estiver fazendo solicitações de API do middleware da página, os cookies adequados sejam enviados.

Veja este link, https://github.com/nuxt/nuxt.js/issues/454Como o middleware da página pode ser executado no lado do servidor em SSR, os cookies podem não estar disponíveis lá. Existem módulos que disponibilizam cookies no servidor. Mas em vez disso, você pode apenas colocar suas solicitações de API em um método que é executado no navegador, Ex. criado, buscar etc.

Desculpe, estou escrevendo esta resposta com pressa, vou melhorá-la mais tarde.