Angular中Subscribe内数据与输入值的对比方法

嗨，作为Angular新手，你已经搭建了一个很不错的登录POC基础！咱们来一步步解决怎么在login.component.ts的subscribe回调里验证用户输入的用户名和密码的问题。

方案一：前端直接过滤返回的用户数组 #

目前你的UserService的getLogin方法会返回所有用户数据，我们可以在组件的订阅回调里，从返回的用户数组中查找和输入匹配的项：

修改你的login.component.ts中的login方法：

login(form: FormGroup) {
  if (this.loginForm.valid) {
    // 先把用户输入的用户名和密码存起来，方便后续使用
    const inputUsername = form.value.loginUserTxt;
    const inputPassword = form.value.loginPassTxt;
    
    this.userData.getLogin(inputUsername, inputPassword)
      .subscribe(
        (users: loginUser[]) => {
          // 使用数组的find方法查找匹配的用户
          const matchedUser = users.find(user => 
            user.username === inputUsername && user.password === inputPassword
          );
          
          if (matchedUser) {
            console.log('登录成功！欢迎你，', matchedUser.name);
            // 这里可以添加登录成功后的逻辑：比如跳转到主页、保存用户信息到localStorage等
          } else {
            console.log('用户名或密码错误，请重新输入');
            // 可以在这里给用户显示错误提示，比如通过组件内的变量控制提示框显示
          }
        },
        error => {
          console.log("请求失败，请检查网络或配置", error);
        }
      );
  }
}

方案二：利用in-memory-web-api的查询参数过滤（更优） #

上面的方案会返回所有用户数据，在实际场景中不够高效。我们可以让in-memory-web-api支持按用户名和密码查询，只返回匹配的用户：

首先修改UserService的getLogin方法，添加查询参数：

// 记得先导入HttpParams
import { Http, Headers, HttpParams } from '@angular/http';

@Injectable()
export class UserService {
  private headers = new Headers({ 'Content-Type': 'application/json' });
  private userUrl = 'api/users'; // URL to web api

  constructor(private http: Http) { }

  getLogin(username: string, password: string) {
    // 创建查询参数
    const params = new HttpParams()
      .set('username', username)
      .set('password', password);
    return this.http.get(this.userUrl, { params }).map(res => res.json());
  }
}

然后修改login.component.ts的订阅逻辑，此时返回的是匹配的用户数组：

login(form: FormGroup) {
  if (this.loginForm.valid) {
    const inputUsername = form.value.loginUserTxt;
    const inputPassword = form.value.loginPassTxt;
    
    this.userData.getLogin(inputUsername, inputPassword)
      .subscribe(
        (matchedUsers: loginUser[]) => {
          if (matchedUsers.length > 0) {
            console.log('登录成功！欢迎你，', matchedUsers[0].name);
            // 登录成功逻辑
          } else {
            console.log('用户名或密码错误');
            // 登录失败提示
          }
        },
        error => {
          console.log("请求失败", error);
        }
      );
  }
}

一些重要的注意事项 #

• 密码安全：这只是POC，实际项目中绝对不能明文传输和存储密码！要使用HTTPS，并且密码要在后端进行哈希验证。
• 前端验证的局限性：前端验证只是为了提升用户体验，真正的身份验证必须在后端完成，不能依赖前端过滤。
• in-memory-web-api的作用：它只是用来模拟后端接口，实际项目中要替换成真实的后端API。

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