调用localStorage.setItem后值为undefined，且传参类型不匹配该如何解决？

问题定位 #

• 入参类型不匹配：setUser方法要求接收Result类型参数，但你调用时传入的是完整的接口返回对象RootObject，RootObject本身不存在UserName、BearerToken等属性，读取这些属性会返回undefined，最终存入localStorage的内容自然全是undefined，这也是TS报类型不匹配错误的直接原因。
• 模型定义可能不符合实际接口结构：你定义的RootObject中Result字段是Result[]数组类型，正常登录接口只会返回当前登录用户的单条信息，不需要用数组包裹，如果你的接口实际返回的是单条Result，这里的模型定义存在错误。
• 接口请求未指定返回类型：loginForm方法返回值设为Observable<any>，TS无法提前校验返回值结构，导致结构不匹配的问题没有在编译阶段提前暴露。

具体修改步骤 #

1. 修正模型定义（适用于99%的登录场景：接口返回单条用户信息）

把RootObject里的Result字段从数组类型改成单个Result类型：

export interface RootObject {
    IsSuccess: boolean;
    ErrorMsg: string;
    ErrorCode?: any;
    Result: Result; // 替换原来的Result[]
}

2. 给请求方法加上正确的返回类型泛型

service文件中给loginForm方法指定返回类型，让TS可以做类型校验：

// 先导入RootObject
import { Result, RootObject } from '../models/user';

// 修改返回值类型和post请求泛型
loginForm(data: any): Observable<RootObject> {
 return this.http
.post<RootObject>(`${environment.baseUrl}/api/login`, data, this.httpOptions)
.pipe(
  retry(2),
  catchError(this.handleError)
);
}

3. 修正登录组件的传参逻辑

调用setUser时传入返回对象中的Result字段，而不是完整的返回对象：

login() {
  if (this.myGroup.valid) {
    this.authService.loginForm(this.myGroup.value).subscribe(response => {
      if (response.IsSuccess == true) {
        console.log(response);
        // 替换原来的response为response.Result
        this.authService.setUser(response.Result);
      }
    }, error => {
      console.error(error);
    });
  } else {
    alert("error ! login failed");
  }
}

特殊场景处理：如果接口返回的Result确实是数组

如果业务逻辑上登录接口返回的Result就是数组结构，你可以取数组中对应的用户对象传入即可，比如取第一个元素：

this.authService.setUser(response.Result[0]);

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