如何从基础Controller在登录表单中显示错误信息？

1. 控制器端错误信息传递 #

• 在登录逻辑的Controller方法中，验证失败时将错误信息存入请求属性或会话：

  // Spring MVC示例
  @PostMapping("/login")
  public String login(@RequestParam String username, @RequestParam String password, Model model) {
      if (!userService.validateCredentials(username, password)) {
          model.addAttribute("errorMessage", "用户名或密码错误");
          return "login";
      }
      return "redirect:/home";
  }
  

• 前后端分离场景，返回JSON格式错误响应：

  @PostMapping("/api/login")
  public ResponseEntity<?> login(@RequestBody LoginRequest request) {
      if (!userService.validateCredentials(request.getUsername(), request.getPassword())) {
          return ResponseEntity.badRequest().body(Map.of("error", "用户名或密码错误"));
      }
      return ResponseEntity.ok(Map.of("token", generateToken()));
  }
  

2. 前端页面错误信息展示 #

• 服务器端渲染场景（如Thymeleaf），在表单内添加错误提示元素：

  <div class="error-message" th:if="${errorMessage}" th:text="${errorMessage}"></div>
  <form action="/login" method="post">
      <input type="text" name="username" placeholder="用户名">
      <input type="password" name="password" placeholder="密码">
      <button type="submit">登录</button>
  </form>
  

• 前后端分离场景（如Vue），请求失败后解析错误信息展示：

  // Axios示例
  axios.post('/api/login', { username, password })
      .then(res => {
          // 登录成功逻辑
      })
      .catch(err => {
          this.errorMessage = err.response.data.error;
      });
  

3. 关键注意事项 #

• 重定向场景需用Flash Attribute传递错误信息，避免请求属性丢失：

  return "redirect:/login";
  

• 全局异常处理器需统一封装错误响应，确保信息能传递到前端：

  @ControllerAdvice
  public class GlobalExceptionHandler {
      @ExceptionHandler(AuthenticationException.class)
      public String handleAuthException(AuthenticationException e, Model model) {
          model.addAttribute("errorMessage", e.getMessage());
          return "login";
      }
  }
  

内容的提问来源于stack exchange，提问作者Lemon Grab