Question

我正在尝试在ajax put请求后进行重定向。我计划使用纯JS客户端进行验证。

客户端：

$(document).ready(function() {
    login = () => {
        var username = $("[name='username']").val()
        var password = $("[name='password']").val()
        $.ajax({
            type: "put",
            url: '/login',
            data: {
                username: username,
                password: password
            }
            // success: function(response) {
            //  console.log('Success:')
            //  console.log(response.user)

            //  Cookies.set('username', response.user.username)
            //  Cookies.set('first_name', response.user.first_name)
            //  Cookies.set('last_name', response.user.last_name)
            //  Cookies.set('email', response.user.email)

            //  window.location.href = window.location.origin + '/'
            // },
            // error: function(error) {
            //  console.log("Error:")
            //  console.log(error)
            // }
        })
    }

    logout = () => {
        console.log("Log out clicked.")
        Cookies.remove('username')
        Cookies.remove('first_name')
        Cookies.remove('last_name')
        Cookies.remove('email')
        window.location.href = window.location.origin + '/logout'
    }
})

服务器：

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('main')
});

router.put('/login', function(req, res) {
    // Password is not encrypted here
    console.log('req.body')
    console.log(req.body)

    User.findOne({ username: req.body.username }, function(err, user) {
        // Password is encrypted here
        if (err) throw err
        console.log('user')
        console.log(user)

        bcrypt.compare(req.body.password, user.password, function(err, result) {
            if (result) {
                var token = jwt.encode(user, JWT_SECRET)
                // return res.status(200).send({ user: user, token: token })
                return res.redirect('/')
            } else {
                return res.status(401).send({error: "Something is wrong."})
            }
        })
    })
})

成功登录后我无法呈现main.hbs。我的注释代码有效，但我正在尝试重定向服务器端而不是客户端，因为我被告知它对安全性更好。

Answer 1

您应该知道何时使用href和replace功能。

window.location.replace(...)将是表示HTTP重定向的最佳方式。

<强>原因

与window.location.href进行比较时，window.location.replace(...)最好在HTTP重定向方案中使用，因为replace()可以避免将原始页面保留在会话历史记录中，这有助于用户避免陷入困境一个永无止境的后退惨败。

<强>摘要

如果您想说明点击链接，请使用location.href

如果您想说明HTTP重定向，请使用location.replace

<强>示例

//  an HTTP redirect
window.location.replace("http://example.com");

//  clicking on a link
window.location.href = "http://example.com";

<强>更新

服务器无法从ajax请求进行重定向。最后，ajax涉及客户端（浏览器）。

如果需要，您可以通过服务器端呼叫发送重定向指令，但它将在客户端再次在回调中结束。您可以通过从服务器返回包含要重定向到的URL的对象来执行此操作。然后使用javascript更改文档的位置属性。如下：

服务器端代码

if (result) {
    var token = jwt.encode(user, JWT_SECRET)
    return res.status(200).send({result: 'redirect', url:'/'})
} else {
    return res.status(401).send({error: "Something is wrong."})
}

然后在客户端Javascript：

$.ajax({
  type: "put",
  url: '/login',
  data: {
    username: username,
    password: password
  }
  success: function(response) {
    if (response.result == 'redirect') {
      //redirecting to main page from here.
      window.location.replace(response.url);
    }

  }
});

除此之外，您的注释代码是执行此操作的正确方法。就像你提出的一条评论一样，“服务器端重定向是ajax请求的deadend，因为该指令不适用于浏览器，而是一些javascript处理程序。”

Answer 2

我不认为你想做什么是可能的。 AJAX请求仅用于来回传递数据。现在发生的事情是你需要编写客户端行为的脚本。这意味着AJAX请求将传递302和其他数据一起传递到JS上的回调。不能从服务器更改客户端行为。您可以使用AJAX返回的值执行某些操作。如果是500，则抛出错误消息，200做某事等。

使服务器重定向工作的唯一方法是通过传统的HTML表单提交。

来自AJAX调用的res.redirect

2 个答案: