web-dev-qa-db-ja.com

Expressを使用したAxios Postリクエストの後にリダイレクトを行う

Axiosからの投稿リクエストを受け入れた後、リダイレクトが機能しません。私のコンソールは「インデックス」、「ユーザー確認済み」をログに記録するので、リクエストが送信されており、少なくとも「/」ルートから何らかの応答を受け取っていることはわかっています。 '。問題は、ページが読み込まれないことです。 google chrome index.jsが読み込まれているが、何を試してもページが変更されないことを確認しました！これに理由はありますか？

私が行った他のリダイレクトは機能しているようです。たとえば、ユーザーがログインしていない場合、インデックスページは/ loginに転送されます。これは投稿リクエストの問題であるようで、パスポート認証の有無でテストしました（明らかに、ログインする必要があることを変更しました）リダイレクトする）と同じ結果です。だからパスポートが問題を引き起こしているとは思いません。

以下のpackage.jsonを参照して、私が使用しているものを確認できます

axiosコード：

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

急行：テスト中に自分に警告するコンソールログがあります

 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

私は後でこれを理解しました。どうやら、Axios投稿リクエストを行うときにサーバーからのリダイレクトを行うことはできません。少なくとも、私がそれを行っていた方法（デフォルトの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サーバーでの投稿リクエスト

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

これはサーバー側のリダイレクトではありませんが、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