web-dev-qa-db-fra.com

Faire des redirections après une demande de publication axios avec express

J'ai du mal à faire fonctionner les redirections après avoir accepté une demande de publication d'Axios. Je sais que la demande est envoyée et qu'elle obtient au moins une réponse de la route '/', car ma console enregistre "index", "vérifié par l'utilisateur", ce qui devrait se produire lorsque quelqu'un fait une demande get à '/ '. Le problème est que la page ne se charge pas. J'ai même vu dans l'onglet réseau sur google chrome que index.js est chargé mais la page ne changera pas quoi que j'aie essayé! Y a-t-il une raison à cela?

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

Vous pouvez vous référer à 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é express: j'ai des journaux de console pour m'alerter 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"
}
node.jsreactjsexpressredirectaxios
6
asdfghjklm

J'ai compris cela après. Apparemment, vous ne pouvez pas faire de redirection depuis le serveur lorsque vous faites une demande de publication Axios. Du moins pas comme je le faisais (avec la configuration Axios par défaut). Vous devez faire le changement de page côté client. Voici comment je l'ai fait.

Cela m'a vraiment bloqué parce que je recevais des données de mon itinéraire de redirection en utilisant l'autre méthode mais la page ne se chargeait pas.

De plus, pour une raison quelconque, en utilisant Next.js, le JSON passport.js "successRedirect" et "failureRedirect" ne semble pas fonctionner. C'est pourquoi j'ai écrit le routage comme je l'ai fait et je n'ai pas inclus ceux dans la fonction passport.authenticate (). J'espère que cela aide 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"
        })
}

La demande de publication 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);
  }
})
10
asdfghjklm

Bien qu'il ne s'agisse pas d'une redirection côté serveur, cela peut être accompli proprement du côté client avec l '"intercepteur" d'Axios qui peut intercepter les demandes ou les réponses avant qu'elles ne soient transmises à then/catch:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });

https://github.com/axios/axios#interceptors

0
docta_faustus