如何在Vaadin框架的Java Web应用中显示登录失败错误信息？

• 阻止表单默认刷新行为
  表单提交时默认会触发页面刷新，必须先阻止这个行为才能执行自定义错误提示逻辑。如果用原生JS，在submit事件里添加event.preventDefault()：

  document.querySelector('#login-form').addEventListener('submit', (e) => {
    e.preventDefault(); // 阻止默认页面刷新
    // 执行登录请求逻辑
  });
  

  要是用React、Vue这类框架，也要对应阻止默认提交（比如React的onSubmit回调里调用e.preventDefault()）。

• 确认后端错误响应格式
  后端登录接口在验证失败时，要返回明确的错误状态码（比如401 Unauthorized）和错误信息（比如{"msg": "用户名或密码无效"}）。别返回200状态码再在响应体里藏错误，否则前端会误以为请求成功，不会进入错误处理分支。

• 完善前端错误提示渲染
  先在页面里预留错误提示的DOM元素：

  <div id="login-error" style="color: #dc3545; margin-top: 8px; display: none;"></div>
  

  登录失败时，把错误信息渲染到这个元素里：

  // 假设从后端响应拿到错误信息errMsg
  const errorEl = document.getElementById('login-error');
  errorEl.textContent = errMsg;
  errorEl.style.display = 'block';
  

• 用开发者工具排查请求过程
  按F12打开浏览器开发者工具，切换到Network标签，检查登录请求的：

  • 状态码是否为4xx/5xx
  • 响应体里有没有正确返回错误信息
  • 前端错误处理代码是否执行（可以加console.log输出，确认代码分支是否走到错误提示逻辑）

内容的提问来源于stack exchange，提问作者James Bond