通过自定义获取传递本地策略不显示闪存消息答案

【问题标题】：Passport local strategy through custom fetch not displaying flash messages通过自定义获取传递本地策略不显示闪存消息
【发布时间】：2021-08-19 17:45:01
【问题描述】：

我正在使用护照本地策略来启用用户登录。早些时候，我的后端代码是 -

passport.authenticate('local', {
      successRedirect : '/dashboard',
      failureRedirect : '/users/login',
      failureFlash : true
    })(req, res, next)

后来，我实现了一个 google recaptcha（需要使用 jquery/JS 的自定义回调函数）。如下-

document.getElementById("login-form").addEventListener('submit', submitForm)
  function submitForm(e){
    e.preventDefault()
    const email = $("#email").val()
    const password = $("#password").val()
    const captcha = $("#g-recaptcha-response").val()

    fetch('/users/login', {
      method:'POST',
      headers:{
        'Accept': 'application/json, text/plain, */*',
        'Content-type': 'application/json'
      },
      body: JSON.stringify({email:email,password:password, captcha:captcha})
    })
    .then(response=>{
      console.log(response)
      if (response.redirected) {
            window.location.href = response.url;
        }
        else{
          
        }
    })
    .catch(function(err) {
        console.info(err + " url: " + url);
    });

现在，在实现自定义回调之前，护照自动显示缺少凭据闪烁消息以防字段为空，但是，现在我正在使用自定义回调，记录了以下数据。我不知道如何显示快讯。请忽略代码中包含js和jquery以及function()和()=>{}等意义上的不一致。

Response {type: "basic", url: "http://localhost:3000/users/login", redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:3000/users/login"
__proto__: Response

【问题讨论】：

标签： javascript jquery node.js promise passport-local

【解决方案1】：

我还没有找到一个可靠的解决方案，但我已经在前端实现了这个 -

基本上，如果验证码被填写，本地策略会将用户重定向到 /login 或 /dashboard（取决于详细信息是否有效）如果验证码没有填充，服务器会发送一个 json 对象作为响应。

现在，我的前端会检查它是 重定向对象 还是其他 json 对象。

如果是 json 格式，则表示验证码丢失，因此会显示错误消息。

如果是重定向URL，如果是/dashboard则重定向，否则如果是/login则添加错误提示。

<script>

   var onloadCallback = function() {
        widgetId2 = grecaptcha.render(document.getElementById('captcha-preview'), {
         'sitekey' : 'insert_key_here'
       });
    };

  document.getElementById("login-form").addEventListener('submit', submitForm)
  
  function submitForm(e){
    e.preventDefault()
    const email = $("#email").val()
    const password = $("#password").val()
    const captcha = $("#g-recaptcha-response").val()

    fetch('/users/login', {
      method:'POST',
      headers:{
        'Accept': 'application/json, text/plain, */*',
        'Content-type': 'application/json'
      },
      body: JSON.stringify({email:email,password:password, captcha:captcha})
    })
    .then(response=>{

      // Incase captcha is verified, the response redirects the user
      if (response.redirected) {

        // If the redirect is to the users/login, captcha is reloaded
            if(response.url.includes(window.location.pathname)){
              grecaptcha.reset(widgetId2)
              $("#display-error").html('<div class="alert alert-danger alert-dismissible fade show" role="alert">Invalid Login Credentials<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>')
            }else{

              // If the redirect is /dashboard, the redirect is made
              window.location.href = response.url;
            }
        }
        else if(!response.redirected){
          $("#display-error").html('<div class="alert alert-danger alert-dismissible fade show" role="alert">Missing captcha<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>')
        }
    })

  }
</script>

【讨论】：