Angular、Node(Passport.js)与MongoDB认证失败问题求助

嘿，我看你在Angular+Node.js(Passport.js)+MongoDB的用户认证上卡壳了，先把你提供的Angular登录组件代码格式化好，再给你几个常见的排查方向：

Angular 登录组件模板（login.component.html） #

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" name="email" ngModel>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" ngModel>
  </div>
  <!-- 补全你截断的提交按钮部分 -->
  <button type="submit" class="btn btn-primary">登录</button>
</form>

几个帮你排查问题的关键点 #

• 表单基础校验：先确保你的Angular模块里导入了FormsModule，否则ngModel和模板驱动表单会直接失效；另外在onSubmit方法里一定要先判断表单有效性：

  onSubmit(loginForm: NgForm) {
    if (loginForm.invalid) return;
    // 这里调用服务发送登录请求到后端
    this.authService.login(loginForm.value).subscribe(
      res => { /* 处理登录成功逻辑 */ },
      err => { /* 处理登录失败提示 */ }
    );
  }
  

• 后端Passport.js本地策略配置：要正确关联MongoDB用户模型，并且必须用哈希算法（比如bcrypt）比对密码，绝对不能明文校验：

  passport.use(new LocalStrategy({ usernameField: 'email' }, 
    async (email, password, done) => {
      try {
        const user = await User.findOne({ email });
        if (!user) return done(null, false, { message: '该邮箱未注册' });
        const isPasswordMatch = await bcrypt.compare(password, user.password);
        if (!isPasswordMatch) return done(null, false, { message: '密码错误' });
        return done(null, user);
      } catch (err) {
        return done(err);
      }
    }
  ));
  

• 跨域与会话配置：后端要开启CORS允许Angular前端域名访问；同时别忘了配置Passport的序列化/反序列化，才能维持登录会话：

  passport.serializeUser((user, done) => done(null, user.id));
  passport.deserializeUser(async (id, done) => {
    const user = await User.findById(id);
    done(null, user);
  });
  

内容的提问来源于stack exchange，提问作者Sta-Dev