Redirection après la demande de publication d'axios dans Express

Question

Je ne parviens pas à rediriger après avoir accepté une demande de publication d'Axios. Je sais que la requête est envoyée et qu'elle reçoit au moins une réponse de la route '/' car ma console enregistre "index", "authentification utilisateur", ce qui devrait se produire lorsque quelqu'un fait une requête get à '/' '. Le problème est que la page ne se charge pas. Je vois même index.js chargé dans l'onglet réseau de Google Chrome, mais peu importe ce que j'essaye, la page ne changera pas ! Y a-t-il une raison quelconque pour cela?

Les autres redirections que j'ai effectuées semblent fonctionner. Par exemple, si l'utilisateur n'est pas connecté, la page d'index sera redirigée vers /login. Cela semble être juste un problème avec la demande de publication, je l'ai testé avec et sans authentification par passeport (évidemment modifié, vous devez être connecté pour rediriger) et les résultats sont les mêmes. Je ne pense donc pas que le passeport soit à l'origine du problème.

Vous pouvez vous référer au package.json ci-dessous pour voir ce que j'utilise

code axios :

axios.post('/login', {username: username, password: password})
        /*.then(response => res.redirect('/'))*/
        .then(function (response) {
            console.log(response);
        })
        .catch(function(error) {
            console.log(error);
        })

Côté expression : j'ai des journaux de console à me rappeler pendant les tests

server.get('/', (req,res) =>{
    console.log("Index");
  if (req.user){
       console.log("user verified");
        res.redirect('/');
        app.render(req,res, '/',req.query);
  } else {
      console.log("user not logged in");
      res.redirect('/login');
  }
})

server.post('/login', passport.authenticate('local'), (req, res, next) => {
    if (req.user) {
        console.log("Logging in");
        res.redirect('/');
  } else {
        console.log("Passwrod Incorrect");
        return res.redirect('/login');
  }
})

package.json

{
  "name": "layout-component",
  "version": "1.0.0",
  "scripts": {
    "dev": "node ./server.js",
    "build": "next build",
    "start": "NODE_ENV=production node ./server.js"
  },
  "dependencies": {
    "@zeit/next-css": "^0.1.5",
    "axios": "^0.18.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.2",
    "connect-flash": "^0.1.1",
    "connect-mongo": "^2.0.1",
    "cookie-parser": "^1.4.3",
    "express": "^4.16.3",
    "express-session": "^1.15.6",
    "express-validator": "^5.1.0",
    "file-loader": "^1.1.11",
    "hoist-non-react-statics": "^2.5.0",
    "jsonwebtoken": "^8.2.0",
    "mongodb": "^3.0.5",
    "mongoose": "^5.0.12",
    "next": "^5.1.0",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "semantic-ui-css": "^2.3.1",
    "semantic-ui-react": "^0.79.0",
    "url-loader": "^1.0.1"
  },
  "license": "ISC"
}

Answer 1

J'ai compris cela plus tard. Apparemment, lorsque vous faites une demande de publication Axios, vous ne pouvez pas rediriger depuis le serveur. Du moins pas comme je le fais (en utilisant la configuration Axios par défaut). Vous devez apporter des modifications à la page côté client. Voici ce que j'ai fait.

Cela me rend vraiment confus car j'utilise d'autres méthodes pour recevoir des données de la route de redirection mais la page ne se charge pas.

De plus, en utilisant Next.js pour une raison quelconque, les JSON passeport.js "successRedirect" et "failureRedirect" ne semblent pas fonctionner. C'est pourquoi j'ai écrit l'itinéraire comme je l'ai fait et je ne l'ai pas inclus dans la fonction Passport.authenticate(). J'espère que ça aidera quelqu'un!

Ma fonction de soumission axios :

onSubmit = (e) => {
    e.preventDefault()
    const {username, password} = this.state;
    axios.post('/login', {username: username, password: password})
        .then(function (response) {
            if (response.data.redirect == '/') {
                window.location = "/index"
            } else if (response.data.redirect == '/login'){
                window.location = "/login"
            }
        })
        .catch(function(error) {
            window.location = "/login"
        })
}

poster la demande sur mon serveur Express

server.post('/login', passport.authenticate('local'), (req, res, next) => {
    if (req.user) {
        var redir = { redirect: "/" };
        return res.json(redir);
  } else {
        var redir = { redirect: '/login'};
        return res.json(redir);
  }
})