Angular双组件用户认证求助：组件间凭证传递逻辑异常

代码中的核心问题 #

1. AuthService的find逻辑错误：find方法的回调函数没有正确返回用户名密码的匹配结果，反而错误引用了未初始化的exists变量，导致永远找不到匹配用户。
2. 凭证属性访问错误：组件传递的credentials已经是表单的value对象，不需要额外调用credentials.value。
3. 混合表单模式冲突：模板同时使用响应式表单(formGroup)和模板驱动表单(ngForm)，可能导致表单值传递异常。

修复后的代码 #

1. login.component.html（修正表单模式）

<form [formGroup]="loginForm" (ngSubmit)="userLogin(loginForm.value)">
  <!-- 表单控件（如用户名、密码输入框） -->
  <input formControlName="username" type="text" placeholder="用户名">
  <input formControlName="password" type="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

2. auth.service.ts（修正验证逻辑）

login(credentials: any) {
  return this.http.get('http://localhost:3000/users').pipe(map(res => {
    this.users = res;
    // 正确返回匹配条件，让find找到对应的用户
    const exists = this.users.find((a: any) => 
      a.username === credentials.username && a.password === credentials.password
    );
    
    if (exists) {
      localStorage.setItem('token', 'trvgrgrtgrvtrvrtvrvrtvrtvrvrvrvrv');
      localStorage.setItem('username', credentials.username);
      return true;
    }
    return false;
  }))
}

3. login.component.ts（确保表单初始化正确）

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from './path-to-auth-service';
import { Router } from '@angular/router';

export class LoginComponent {
  loginForm: FormGroup;
  verified = true;

  constructor(
    private fb: FormBuilder,
    private auth: AuthService,
    private router: Router
  ) {
    // 初始化响应式表单
    this.loginForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  userLogin(credentials: any) {
    this.auth.login(credentials).subscribe(res => {
      if (res) {
        this.router.navigate(['shopping-cart']);
      } else {
        this.verified = false;
      }
    });
  }
}

关键修复说明 #

• 移除模板中的#f="ngForm"，统一使用响应式表单模式，避免表单值传递混乱。
• 修正find方法的回调逻辑，直接返回用户名与密码的匹配条件，确保能正确找到数据库中对应的用户。
• 去掉多余的credentials.value，直接使用组件传递的表单value对象属性。

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