Ubah hala selepas permintaan siaran axios dalam Express

Question

Saya tidak dapat mengubah hala selepas menerima permintaan siaran daripada Axios. Saya tahu bahawa permintaan sedang dihantar dan ia sekurang-kurangnya mendapat respons daripada laluan '/' kerana konsol saya mencatatkan "indeks", "pengesahan pengguna" yang sepatutnya berlaku apabila seseorang membuat permintaan mendapatkan '/' '. Masalahnya ialah halaman tidak akan dimuatkan. Saya juga melihat index.js dimuatkan dalam tab rangkaian Google Chrome, tetapi tidak kira apa yang saya cuba, halaman itu tidak akan berubah! Adakah terdapat sebarang sebab untuk ini?

Ubah hala lain yang saya lakukan nampaknya berkesan. Contohnya, jika pengguna tidak log masuk, halaman indeks akan dihalakan semula ke /log masuk. Ini nampaknya hanya masalah dengan permintaan pos, saya telah mengujinya dengan dan tanpa pengesahan pasport (jelas ditukar kepada anda perlu log masuk untuk mengubah hala) dan hasilnya adalah sama. Jadi saya tidak fikir pasport menyebabkan masalah.

Anda boleh rujuk package.json di bawah untuk melihat apa yang saya gunakan

kod axios:

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

Ekspresi bijak: Saya mempunyai log konsol untuk mengingatkan diri saya semasa ujian

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

pakej.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

Saya fikir perkara ini kemudian. Nampaknya apabila anda membuat permintaan siaran Axios anda tidak boleh mengubah hala dari pelayan. Sekurang-kurangnya bukan cara saya melakukannya (menggunakan konfigurasi Axios lalai). Anda perlu membuat perubahan halaman pada bahagian klien. Inilah yang saya lakukan.

Ini benar-benar mengelirukan saya kerana saya menggunakan kaedah lain untuk menerima data daripada laluan ubah hala tetapi halaman tidak dimuatkan.

Selain itu, menggunakan Next.js atas sebab tertentu, JSON "successRedirect" dan "failureRedirect" passport.js nampaknya tidak berfungsi. Itulah sebabnya saya menulis laluan seperti yang saya lakukan dan tidak memasukkannya ke dalam fungsi Passport.authenticate(). Saya harap ini membantu seseorang!

Fungsi penyerahan axios saya:

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

pos permintaan dalam pelayan Express saya

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