LocalStorage 在 setitem 后显示未定义

Question

我在进行用户身份验证时将项目存储在 localstorage 上。在签入 localstorage

时存储项目未定义

在我的服务文件中：-

import { Result } from '../models/user';
dt: number = new Date().getTime();
 
  loginForm(data: any): Observable<any> {
   return this.http
  .post(`${environment.baseUrl}/api/login`, data, this.httpOptions)
  .pipe(
    retry(2),
    catchError(this.handleError)
  );
  }

  setUser(resp: Result) {
    localStorage.setItem('username', JSON.stringify(resp.UserName));
    localStorage.setItem('token', JSON.stringify(resp.BearerToken));
    localStorage.setItem('lastVisit', String(this.dt));
    localStorage.setItem('storeids', JSON.stringify(resp.StoreIds));
    this.router.navigate(['/home']);
  }

型号：-

export interface Result {
    UserName: string;
    StoreIds: string;
    BearerToken: string;
}

export interface RootObject {
    IsSuccess: boolean;
    ErrorMsg: string;
    ErrorCode?: any;
    Result: Result[];
}

我哪里错了？

编辑：-

组件登录:-

login() {
    if (this.myGroup.valid) {
      this.authService.loginForm(this.myGroup.value).subscribe(response => {
        if (response.IsSuccess == true) {
          console.log(response);
          this.authService.setUser(response);
        }
      }, error => {
        console.error(error);
      });
    } else {
      alert("error ! login failed");
    }
  }

在登录中必须进行哪些更改？ setUser (response) 错误为 Argument of type 'RootObject' is not assignable to parameter of type 'Result'.

Answer 1

setUser() 函数究竟在哪里被调用？理想情况下，它将在通过管道传输到 HTTP 请求的 tap 运算符中调用（将详细信息存储在本地存储中作为副作用）。

loginForm(data: any): Observable<any> {
  return this.http.post(
    `${environment.baseUrl}/api/login`, 
    data, 
    this.httpOptions
  ).pipe(
    tap((resp: Result) => this.setUser(resp)),
    retry(2),
    catchError(this.handleError)
  );
}

更新：类型

鉴于响应的类型为 RootObject 而不是 Result，类型必须按以下方式更改

loginForm(data: any): Observable<RootObject> {  // <-- Observable of type `RootObject`
  return this.http.post<RootObject>(
    `${environment.baseUrl}/api/login`, 
    data,
    this.httpOptions
  ).pipe(
    tap((resp: RootObject) => this.setUser(resp.Result[0] as Result)),
    retry(2),
    catchError(this.handleError)
  );
}

现在我们发送 Result 数组的第一个元素。但是，如果响应只包含一个元素，为什么它是一个数组呢？也许必须在后端将其调整为 return 对象而不是数组。

LocalStorage 在 setitem 后显示未定义

LocalStorage showing undefined after setitem

local-storage

angular

更新：类型