Node.js & Express - 错误和成功模式一起出现在错误情况下

Question

我正在使用 Node.js 和 Express 进行 Web 开发，并且还尝试实现反应式编程（使用我的前辈正在使用的库）。我目前正在做一个用户更改密码表单，它必须在

时显示错误模式

a) 当前密码通知与数据库中存储的实际当前密码不匹配；

b) 新密码和确认密码不同，且

c) 通知的新密码少于 5 个或多于 20 个字符。

根据每个错误显示一个模式预设（我们称之为errModal）和一个successModal（当密码满足所有要求时）。

由于某种原因，在错误情况下，successModal 会在 errModal 之前弹出 - 即使运行服务器端验证的函数位于 try 块内...

免责声明：我只是寻求帮助，因为我在这里找到的所有类似故障排除都对我没有帮助。

我的网页客户端如下：

// ???? ???? ☩ ZELO E EXCELÊNCIA POR CRISTO NAS OBRAS ☩ ???? ????
/* global alertModal */
import observable from '../../includes/reactive/observable.js'
// FLUXO DE DADOS do usuário que serão modificados ao decorrer do uso da página.
const data = observable({})

// atualiza dados do fluxo de dados
function updateForms(value1, value2, value3, value4) {
  // new Watcher(() => {
  if (value1 === 1) {
    data.userForm = $('#username').val()
  } else {
    data.userForm = $('#username').val(value1)
  }
  if (value2 === 1) {
    data.oldPasswordForm = $('#passwordOld').val()
  } else {
    data.oldPasswordForm = $('#passwordOld').val(value2)
  }
  if (value3 === 1) {
    data.newPasswordForm = $('#passwordNew').val()
  } else {
    data.newPasswordForm = $('#passwordNew').val(value3)
  }
  if (value4 === 1) {
    data.confirmForm = $('#confirmation').val()
  } else {
    data.confirmForm = $('#confirmation').val(value4)
  }
  // })
}

let sendData = {
  name: data.userForm,
  pwdOld: data.oldPasswordForm,
  pwdNew: data.newPasswordForm,
  pwdConfirm: data.confirmForm,
}

// dados que receberão os dados do Observable

// FUNÇÃO que pega o nome do usuário registrado globalmente.
// o nome geralmente fica no objeto Window.

// CONSTANTES com acessos a elementos HTML via JQuery.

// FUNÇÃO que envia os dados do objeto <<data>> para o servidor
function sendToServer() {
  // new Watcher(() => {
  const b = $.post(`${window.location.pathname}/edit-password`, sendData)
  return b
  // })
}

// INTERAÇÃO DIRETA COM FRONT-END

// FLUXO DE TRABALHO DA PÁGINA
//
//
start()
// Adquire a rota do arquivo no lado do servidor e captura o nome do usuário para exibi-lo no input "Nome do usuário"
async function start() {
  const userInfo = await $.get(`${window.location.pathname}/user-name`)
  $('#username').val(userInfo.name)
}

const cleanBtn = $('#clean')
// FUNÇÃO executada quando botão Limpar é pressionado: limpar campos
cleanBtn.click(() => {
  updateForms(1, '', '', '')
})
// FUNÇÕES que pega os dados do formulário assim que o usuário para de escrever nele

const saveBtn = $('#saveChanges')
// FUNÇÃO executada quando botão Salvar Alterações é pressionado:
// envia os dados para o servidor validar e registrar no banco
saveBtn.click(async () => {
  // desabilitando o botão Salvar Alterações
  saveBtn.attr('disabled', true)
  // enviando para o servidor
  //
  updateForms(1, 1, 1, 1)
  sendData = {
    name: data.userForm,
    pwdOld: data.oldPasswordForm,
    pwdNew: data.newPasswordForm,
    pwdConfirm: data.confirmForm,
  }
  try {
    sendToServer()
    alertModal({
      title: 'Sucesso',
      message: 'Senha alterada com sucesso!',
    }) // mensagem de sucessoQ
    // console.log('CAL')
  } finally {
    saveBtn.attr('disabled', false) // reabilitando botão Salvar Alterações
  }
})

我的网页服务器端如下：

// ???? ???? ☩ ZELO E EXCELÊNCIA POR CRISTO NAS OBRAS ☩ ???? ????

import express from 'express'
import dbUtils from '../../../utils/dbUtils'
export const router = express.Router()
var jsonUtils = require.main.require('../routes/json/jsonUtils')
var M = require('mstring')

// Adquire a rota e carrega a página no navegador.
router.get('/', (req, res) => {
  res.render('management/web_users/change_my_password')
})

// Recebe a requisição de nome de usuário por parte do cliente.
router.get('/user-name', (req, res) => {
  res.json({
    name: req.user.name,
  })
})

// Adquirindo dados do formulário enviado pelo cliente.
// Se der certo, registra as alterações no banco de dados.
// Se não, envia mensagem de erro para o lado do cliente, assim ajudando o usuário a resolver o problema.

router.post('/edit-password', (req, res) => {
  dbUtils.transaction(req, res, async conn => {
    const data = req.body // adquire dados enviados por HTTP Post
    let q = `
      SELECT password FROM web_user_info
      WHERE name = ?` // define a sequência de consulta SQL
    let db = await dbUtils.query(conn, q, data.name) // realiza a consulta
    const dbData = {
      dbPwdOld: db[0][0].password, // adquire o dado que a consulta obteve
    }

    if (data.pwdOld !== dbData.dbPwdOld) {
      throw {
        backendMsg: 'Senha atual não confere!',
      } // erro 1: senha atual != senha informada no campo Senha Atual
    }
    if (data.pwdNew !== data.pwdConfirm) {
      throw {
        backendMsg:
          "Senhas nos campos 'Confirmar Senha' e 'Nova Senha' não conferem!",
      } // erro 2: campos de S. Nova e Confirm. Senha divergem
    }
    if (
      data.pwdNew.length < 5 ||
      data.pwdConfirm.length < 5 ||
      data.pwdNew.length > 20 ||
      data.pwdConfirm.length > 20
    ) {
      throw {
        backendMsg: 'A senha deve ter de 5 a 20 caracteres.',
      } // erro 3: senha tem menos ou mais caracteres do que foi definido pelo sistema
    }

    q = `UPDATE web_user_info
    SET password = ?
    WHERE name = ?`
    const args = [data.pwdConfirm, data.name]
    db = await dbUtils.query(conn, q, args) // sucesso: dados atualizados no banco de dados

    insertLog()

    function insertLog() {
      return insertUserLog(
        conn,
        2,
        'update',
        req.user.id,
        'username= ' +
          req.body.name +
          ' passwordOld= ' +
          req.body.pwdOld +
          ' passwordNew= ' +
          req.body.pwdConfirm
      )
    }
    function insertUserLog(connection, id, type, userId, extra) {
      var QUERY = M(function () {
        /***
           INSERT INTO web_logs (cat, cat_id, sub_cat, date, user_id, extra)
           VALUES ('user', ?, ?, CURRENT_TIMESTAMP, ?, ?)
           ***/
      })
      return jsonUtils.promiseSQLConnection(connection, QUERY, [
        id,
        type,
        userId,
        extra,
      ])
    }
  })
})

Answer 1

发现了。

在客户端，函数sendToServer()：

const b = $.post(`${window.location.pathname}/edit-password`, sendData)

是一个异步函数，这意味着程序将在调用sendToServer()之后立即运行alertModal()。

只需在调用sendToServer() 之前添加await 即可解决此问题：

// (...)
try {
    await sendToServer()
    alertModal({
      title: 'Sucesso',
      message: 'Senha alterada com sucesso!',
    }) // mensagem de sucessoQ
    // console.log('CAL')
  }
// (...)