Angular中从JSON Server提取当前登录用户对象并存储的实现

你的需求完全能实现，原代码里的filter用法有误，导致找不到目标用户，下面是具体的修正方案：

原代码的问题 #

• filter的回调函数没拿到当前遍历的用户对象，你直接写this.allUsers.username，但this.allUsers是数组，根本没有username属性
• filter返回的是符合条件的用户数组，而你需要的是单个用户对象，应该用find方法

修正后的基础代码 #

this.http.get("http://localhost:3000/users").subscribe(res => {
  this.allUsers = res;
  const loginName = localStorage.getItem('username');
  if (loginName) {
    // 用find匹配单个用户
    this.user$ = this.allUsers.find(user => user.username === loginName);
  } else {
    // 处理没获取到用户名的情况，比如提示用户登录
    console.log("未检测到登录状态，请先登录");
  }
});

更贴合Angular的响应式写法（推荐） #

在Angular里，更推荐用RxJS操作符直接在数据流里处理，不用在subscribe里写逻辑：

import { map, tap } from 'rxjs/operators';

// 先定义用户类型，让代码更严谨
interface User {
  id: number;
  username: string;
  password: string;
  isAdmin: boolean;
  isLoggedIn: boolean;
  students?: {
    username: string;
    password: string;
    age: string;
    ged: string;
  };
}

// 组件里的代码
this.user$ = this.http.get<User[]>("http://localhost:3000/users").pipe(
  tap(users => this.allUsers = users), // 先存下所有用户
  map(users => {
    const loginName = localStorage.getItem('username');
    return loginName ? users.find(user => user.username === loginName) : null;
  })
);

额外优化建议 #

1. 定义User接口能避免类型混乱，写代码时编辑器还会给提示
2. 一定要考虑localStorage里没有用户名的情况，比如用户直接访问页面没登录
3. 还可以让JSON Server直接返回匹配的用户，减少前端处理：

const loginName = localStorage.getItem('username');
if (loginName) {
  // 用查询参数直接请求目标用户，返回单个对象
  this.http.get(`http://localhost:3000/users?username=${loginName}`).subscribe(user => {
    this.user$ = user;
  });
}

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