從AJAX調用res.redirect

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

我不認爲你想要做什麼是可能的。 AJAX請求只是爲了傳遞數據。現在發生的事情是，你需要在你的端腳本客戶端行爲腳本。這意味着AJAX請求會傳遞一個302和其他數據到JS上的回調。客戶端行爲不能從服務器上改變。這取決於你使用AJAX返回值做些什麼。如果500，拋出錯誤信息，200做某事等

您可以通過傳統的HTML表單提交來獲得服務器重定向的唯一方法。

Answer 2

您應該知道何時使用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請求設計的，因爲該指令不適用於瀏覽器，而是一些JavaScript處理程序。」