Faire des redirections après une axios requête post avec express

Je vais avoir de la difficulté à obtenir des redirections de travailler après l'acceptation d'une requête post par Axios. Je sais que la demande est envoyée et qu'il obtient une réponse de la '/' route, parce que mes journaux de la console "index", "utilisateur vérifié" qui est ce qui devrait se produire quand 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 mise en réseau sur google chrome index.js est chargé, mais la page ne changera pas, peu importe ce que j'ai essayé! Est-il une raison pour cela?

Autres redirections que j'ai fait ne semble pas fonctionner. Par exemple, la page d'index sera rediriger vers /de connexion si l'utilisateur n'est pas connecté. Cela semble être la seule à avoir un problème avec la requête post et je l'ai testé avec et sans authentification passport (évidemment changé, vous devez être connecté pour rediriger) et c'est le même résultat. Donc, je ne pense pas que le passeport est à l'origine du problème.

Vous pouvez vous référer à l'emballage.json ci-dessous pour voir ce que je suis en utilisant

axios code:

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

express côté: j'ai journaux de la console à l'alerte de moi-même au cours des essais

 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');
  }
})

paquet.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"
}

Je suis en supposant que vous faites un appel ajax vers le serveur à l'aide de axios. En ajax réponse de redirection à partir du serveur ne peut pas être pris en considération par défaut, comme d'habitude les requêtes du navigateur. Mieux envoyer une réponse 401 json des clients et de la redirection à partir du client.
Je ne pense pas que je suis en utilisant Ajax à tous. Je suis juste en utilisant le acios
Ne sais pas si je suis en utilisant Ajax à tous. À moins d'axios l'utilise. Pouvez-vous me montrer ce que tu veux dire?
J'ai travaillé sur ce problème pendant plus de 5 heures dans la journée et je n'arrive pas à faire fonctionner le chemin de la maison il le devrait. Je ne suis pas sûr de savoir si la requête post n'est pas envoyé ou si je reçois correctement. Je peux console.journal et de voir les données sont envoyées (,peut imprimer le nom d'utilisateur et mot de passe ) et de voir aussi qu'il essaie de rediriger les index et les charges de l'enregistrement de l'index de la page de redirection. Le navigateur ne peut pas faire n'importe quoi.
Oh. Mon axios config est entièrement défaut. Je n'ai pas d'installation de quoi que ce soit . Juste le fil ajouter axious et écrit le post de la fonction. Si j'ai écrit une config?

InformationsquelleAutor asdfghjklm | 2018-04-01

Je compris cela après. Apparemment, vous ne pouvez pas faire une redirection à partir du serveur lorsque vous faites une Axios requête post. Au moins pas de la façon que je le faisais (avec la valeur par défaut Axios config.) Vous avez besoin de faire le changement de page sur le côté client. Voici comment je l'ai fait.

Ce vraiment perplexe moi parce que j'étais la réception de données à partir de mon rediriger itinéraire à l'aide de l'autre méthode, mais la page n'était pas chargé.

Aussi, pour une raison quelconque à l'aide de Next.js le passport.js "successRedirect" et "failureRedirect" JSON ne semble pas fonctionner. C'est pourquoi j'ai écrit le routage de la façon dont je l'ai et ne pas les faire figurer dans le passeport.authenticate() fonction. J'espère que cela aide quelqu'un!

Mon Axios soumettre fonction:

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 post dans mon Express server

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);
  }
})

InformationsquelleAutor asdfghjklm

0

Bien que ce ne sera pas une redirection côté serveur, ce qui peut être accompli proprement sur le côté client avec Axios' "interceptor", qui permet d'intercepter les requêtes ou réponses avant qu'ils ne se passait à 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
- comment avez-vous rediriger l'utilisateur ici? Si vous rediriger avant de retourner Promise.reject(error) vous obtenez une onunhandledrejection erreur.
- Pour mon cas, je voulais simplement faire un manuel de rediriger vers une page d'erreur si je n'ai suivantes: axiosAPI.les intercepteurs.réponse.utilisation(réponse => { return réponse; }, error => { console.erreur('Axios erreur:", erreur); if (erreur.réponse.statut === 401) { window.location = 'erreur'; } return Promesse.rejeter(erreur); });
InformationsquelleAutor docta_faustus

Vous devez vous connecter pour publier un commentaire.