Passport local strategy through custom fetch not displaying flash 消息

Question

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

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

现在，在实施自定义回调之前，passport 自动显示 缺少凭据 闪现消息 incase 字段为空，但是，现在我正在使用自定义回调，记录了以下数据.我不确定如何显示 即时消息 。请忽略代码不一致的地方，因为它包含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

Answer 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>

Passport local strategy through custom fetch not displaying flash 消息

Passport local strategy through custom fetch not displaying flash messages

javascript

jquery

node.js

promise

passport-local