使用 express 在 axios post 请求之后进行重定向

IT技术 node.js reactjs express redirect axios
2021-04-12 03:57:00

在接受来自 Axios 的发布请求后，我无法重定向工作。我确实知道请求正在发送并且它至少从“/”路由得到一些响应，因为我的控制台记录了“索引”、“用户验证”，这是当有人向 '/ 发出获取请求时应该发生的情况'。问题是页面无法加载。我什至在 google chrome 的网络选项卡中看到 index.js 已加载，但无论我尝试什么，页面都不会改变！有什么原因吗？

我所做的其他重定向似乎有效。例如，如果用户未登录，索引页面将重新路由到 /login。这似乎只是 post 请求的一个问题，我已经在使用和不使用护照身份验证的情况下对其进行了测试（显然已更改为您需要登录在重定向），它是相同的结果。所以我不认为护照是造成这个问题的原因。

你可以参考下面的 package.json 看看我在用什么

轴代码：

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

包.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"
}
2个回答

我后来想通了这一点。显然，当您发出 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 服务器中的 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);
  }
})
这是有效的，但问题是，页面每次都在刷新
2021-06-05 03:57:00
相同的。页面每次都刷新。解决方案是什么？
2021-06-12 03:57:00

虽然它不会是服务器端重定向，但这可以在客户端使用 Axios 的“拦截器”干净利落地完成，它可以在请求或响应传递到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

就我而言，我只是想手动重定向到错误页面，因此我执行了以下操作： axiosAPI.interceptors.response.use(response => { return response; }, error => { console.error('Axios error :', error); if (error.response.status === 401) { window.location = '/error'; } return Promise.reject(error); });
2021-06-04 03:57:00
你如何将用户重定向到这里？如果在返回之前重定向，Promise.reject(error)则会onunhandledrejection出现错误。
2021-06-12 03:57:00
其它你可能感兴趣的问题
上一篇为什么 componentDidUpdate() 会创建一个无限循环？ 下一篇在 React 子组件上调用方法