javascript - 使用 Express 和 Javascript 通过 POST 登录后重定向

Question

我正在尝试构建我的第一个 Node.js 应用程序。现在我正在一个登录站点上工作，应该在成功登录后将用户重定向到/backend 。但是在控制台中看起来一切正常，但浏览器什么也不做。我在 stackoverflow 上发现了一些类似的帖子，但大多数人都在使用 AJAX，但我找不到适合我的帖子。

这是我的 POST 方法。它首先对用户进行身份验证，如果成功，我想被重定向:

router.post('/login', (req, res) => {
    store
        .authenticate({
            username: req.body.username,
            password: req.body.password
        })
        .then(({ success }) => {
            if (success) {
                res.redirect('/backend')
            }
            else res.sendStatus(401)
        })
}); 

这是我用于后端站点的 GET 方法:

router.get('/', function(req, res, next) {
  res.render('backend/backend');
}); 

不确定是否需要，但这里是触发 POST 方法的事件监听器:

const Login = document.querySelector('.Login')
Login.addEventListener('submit', (e) => {
  e.preventDefault()
  const username = Login.querySelector('.username').value
  const password = Login.querySelector('.password').value
  post('/login/login', { username, password })
    .then(({ status }) => {
      if (status === 200) alert('login success')
      else alert('login failed')
    })
})

我的控制台显示如下:验证用户用户名POST/登录/登录302获取/后端 304

但是我的浏览器没有显示/backend，尽管显然正在调用 GET 方法。感谢您的帮助!

Answer 1

我不知道 post 函数以及选项是什么，但是如果您将其替换为 fetch 函数，那么您可以设置 redirect: 'follow' 属性在服务器告诉它时重定向。

const Login = document.querySelector('.Login')
Login.addEventListener('submit', (e) => {
  e.preventDefault()
  const username = Login.querySelector('.username').value
  const password = Login.querySelector('.password').value
  fetch('/login/login', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
    redirect: 'follow'
  }).then(({ status }) => {
    if (status !== 200) alert('login failed')
  })
})

或者，您可以从服务器发送您应该重定向到的 URL，然后从客户端手动重定向到该页面。

// Instead of res.redirect(), use send to send the URL back to the client.
res.send('/backend');

const Login = document.querySelector('.Login')
Login.addEventListener('submit', (e) => {
  e.preventDefault()
  const username = Login.querySelector('.username').value
  const password = Login.querySelector('.password').value
  post('/login/login', { username, password })
    .then((response) => {
      if (response.status === 200) {
        alert('login success');
        return response.text();
      }
      else alert('login failed')
    })
    .then((url) => {
      location.replace(location.origin + url);
    });
})