Angular与Express服务端通信：如何在前端接收登录验证结果？

1 修正Express侧登录接口逻辑 #

首先原有Express登录逻辑存在3处问题，会导致前端无法正常接收结果：

• 密码验证通过仍返回400错误状态码，会被Angular HttpClient识别为请求失败
• 未处理用户不存在的场景，接口会无响应导致前端请求超时
• 未按需求返回loginSuccess布尔标识

修正后的接口代码如下：

app.post('/login',async (req:express.Request,res:express.Response) => {
    try {
        const body = req.body;
        const user = await User.findOne({email: body.email});
        if(!user){
            // 用户不存在场景
            return res.status(401).json({ 
                loginSuccess: false,
                message: "用户不存在" 
            });
        }
        const passwordValid = await bcrypt.compare(body.password,user.password);
        if(passwordValid){
            // 密码验证通过，返回200成功状态码
            return res.status(200).json({ 
                loginSuccess: true,
                message: "登录成功"
                // 后续可扩展返回JWT令牌、用户信息等字段
            });
        }else{
            // 密码错误场景
            return res.status(401).json({ 
                loginSuccess: false,
                message: "密码错误" 
            });
        }
    } catch (err) {
        // 服务器异常兜底
        return res.status(500).json({
            loginSuccess: false,
            message: "服务器内部错误"
        })
    }
})

2 改造Angular侧登录服务 #

原有登录服务直接在方法内订阅请求，无法将结果返回给调用的组件，需要改造为返回Observable对象，外层组件订阅后即可拿到返回结果：

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

// 提前定义返回结果的接口，保证类型安全
interface LoginResponse {
  loginSuccess: boolean;
  message: string;
}

// 改造后的login方法
login(email: string, password: string): Observable<LoginResponse> {
  return this.http.post<LoginResponse>(this.logInUserURL, {
    email: email,
    password: password
  });
}

3 组件内订阅结果控制UI #

在登录组件中调用服务的login方法，订阅返回结果后赋值给组件变量，即可在模板中绑定变量控制UI展示：

组件类代码示例 #

// 定义UI绑定变量
isLoginSuccess?: boolean;
loginTip?: string;

// 登录表单提交触发方法
handleLoginSubmit(email: string, password: string) {
  this.userService.login(email, password).subscribe({
    // 状态码200时触发
    next: (res) => {
      this.isLoginSuccess = res.loginSuccess;
      this.loginTip = res.message;
      // 可扩展登录成功后路由跳转逻辑
    },
    // 状态码4xx/5xx时触发
    error: (errRes) => {
      this.isLoginSuccess = errRes.error.loginSuccess;
      this.loginTip = errRes.error.message;
    }
  })
}

模板代码示例 #

<!-- 登录成功提示 -->
<p *ngIf="isLoginSuccess === true" class="success-notice">
  {{loginTip}}
</p>
<!-- 登录失败提示 -->
<p *ngIf="isLoginSuccess === false" class="error-notice">
  登录失败：{{loginTip}}
</p>

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