Weiterleitung nach Axios-Post-Anfrage in Express

Question

Ich kann keine Weiterleitung durchführen, nachdem ich eine Post-Anfrage von Axios angenommen habe. Ich weiß, dass die Anfrage gesendet wird und zumindest eine Antwort von der Route „/“ erhält, da meine Konsole „Index“ und „Benutzerauthentifizierung“ protokolliert, was passieren sollte, wenn jemand eine Get-Anfrage an „/“ stellt. '. Das Problem ist, dass die Seite nicht geladen wird. Ich sehe sogar, dass index.js im Netzwerk-Tab von Google Chrome geladen ist, aber egal, was ich versuche, die Seite ändert sich nicht! Gibt es dafür einen Grund?

Die anderen Weiterleitungen, die ich durchgeführt habe, scheinen zu funktionieren. Wenn der Benutzer beispielsweise nicht angemeldet ist, wird die Indexseite nach /login umgeleitet. Dies scheint nur ein Problem mit der Post-Anfrage zu sein. Ich habe es mit und ohne Passauthentifizierung getestet (offensichtlich dahingehend geändert, dass Sie zum Weiterleiten angemeldet sein müssen) und die Ergebnisse sind die gleichen. Ich glaube also nicht, dass der Reisepass das Problem verursacht.

Sie können sich unten auf package.json beziehen, um zu sehen, was ich verwende

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

Was den Ausdruck angeht: Ich habe Konsolenprotokolle, die mich während des Testens daran erinnern

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

我后来想通了这一点。显然，当您发出 Axios post 请求时，您无法从服务器进行重定向。至少不是我这样做的方式（使用默认的 Axios 配置）。您需要在客户端进行页面更改。我是这样做的。

这真的让我很困惑，因为我使用其他方法从重定向路由接收数据，但页面未加载。

此外，由于某种原因使用 Next.js，passport.js“successRedirect”和“failureRedirect”JSON 似乎不起作用。这就是为什么我按照自己的方式编写路由，并且没有将其包含在 Passport.authenticate() 函数中。我希望这对某人有帮助！

我的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"
        })
}

我的 Express 服务器中的 post 请求

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