Angular 16表单提交后重定向失效问题求助

你的问题核心是表单原生提交行为打断了异步登录流程：点击type="submit"按钮时，浏览器会立即触发默认表单提交（即使没指定action也会刷新页面），而你的登录请求是异步HTTP调用——页面刷新会直接中断请求，导致sessionStorage.setItem还没执行就重置了应用状态，路由守卫IsAuthFilter检查不到token，最终重定向回login页面。

方法1：阻止表单默认提交行为 #

在submit事件中传入浏览器原生事件对象，调用preventDefault()禁用默认提交动作：

1. 修改HTML表单标签，添加事件参数：

<form (submit)="login(username.value, password.value, $event)">

2. 更新TS的login方法，接收并处理事件：

login(username: string, password: string, event: Event){
  // 阻止浏览器原生提交，避免页面刷新
  event.preventDefault();

  this.auth.login(username, password).subscribe({
    next: (response: any) =>{
      if(response["token"]){
        sessionStorage.setItem("Authorization", response["token"])
      }
      this.router.navigateByUrl("/index")
    },
    error: (msg) => {
      console.log(msg)
    }
  });
}

方法2：禁用Angular表单默认处理 #

给form标签添加ngNoForm属性，直接跳过Angular和浏览器对表单的默认处理逻辑，无需修改TS代码：

<form (submit)="login(username.value, password.value)" ngNoForm>

补充说明 #

你用普通按钮（type="button"）能正常工作，是因为普通按钮不会触发表单原生提交，只会执行绑定的点击事件，异步请求和路由导航能完整执行。另外请确保IsAuthFilter守卫逻辑正确读取sessionStorage中的token，避免守卫本身导致的重定向问题。

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