錯誤型別錯誤：無法在Angular登錄中讀取未定義的屬性（讀取“訊息”）

在我的 Angular 13 中，我有以下代碼：

來自 ASP.NET Core Web API 的 JSON 回應：

{
   "code": 200,
   "error": false,
   "message": "Logged In Successful",
   "results": {
       "token": "thisismytoken...",
       "user": {
           "id": 1,
           "username": "Ashwel",
          },
       "roles": [
           "SuperAdmin"
       ]
   }
}

角度

用戶.ts：

export interface IResponse<T> {
  message: string;
  error: boolean;
  code: number;
  results: T;
}

export interface IUser 
{
  username?: string;
  token?: string;
  roles?: string[];
}

身份驗證服務：

export class AuthService {
  baseUrl = environment.apiUrl;
  private currentUserSource = new ReplaySubject<IUser | null>(1);
  currentUser$ = this.currentUserSource.asObservable();

  constructor(private http: HttpClient, private router: Router) { }
  login(model: any){
    return this.http.post(this.baseUrl 'auth/login', model).pipe(
      map((res:IUser)=>{
        const user = res;
        if(user){
          this.setCurrentUser(user);
        }
      })
    )
  }

  setCurrentUser(user: IUser){
    if(user && user.token){
      user.roles = [];
      const roles = this.getDecodedToken(user.token).role;
      Array.isArray(roles) ? user.roles = roles : user.roles.push(roles);
      localStorage.setItem('user', JSON.stringify(user));
      this.currentUserSource.next(user);
    }
  }

  getDecodedToken(token: string) {
    return JSON.parse(atob(token.split('.')[1]));
  }
}

身份驗證組件：

export class AuthComponent implements OnInit {
  loginForm!: FormGroup;
  user!: IUser | null;

  constructor(
   private authService: AuthService,
   private router: Router,
   private toastr: ToastrService
   ) {
   this.authService.currentUser$.pipe(take(1)).subscribe(user=> this.user = user);
 }

myForm() {
  this.loginForm = new FormGroup({
    UserName: new FormControl('', Validators.required),
    Password: new FormControl('', [Validators.required])
  })
}

login(){
  this.authService.login(this.loginForm.value).subscribe({
    next: (res: any) => {
      console.log(res);
      this.toastr.success(res.message);
      this.router.navigateByUrl('dashboard');
    },
    error: (error) => {
      this.toastr.error(error.message);
    }
  })
 }
}

這是流程auth.component-> auth.service-> user.ts：

我打算做的是，當用戶提交登錄時：

1. 令牌、用戶名和角色存盤在 localStorage
2. 登錄成功時，顯示資訊：登錄成功
3. 它重定向到儀表板

但不是所有這些，我在檢查 - >控制臺中得到了這個錯誤：

錯誤型別錯誤：無法讀取未定義的屬性（讀取“訊息”）

當我執行 console.log(res) in 時auth.service，我沒有定義。

如何解決此錯誤？

謝謝

uj5u.com熱心網友回復：

我在您的AuthService.login方法中看到兩個錯誤：

• IUser根據您發布的 JSON，您擁有回應標簽，它應該是IResponse<IUser>>
• 您正在使用map運算子來觸發副作用。map用于對發出的值應用轉換，因此 map 函式應回傳轉換值。要觸發副作用，您應該使用tap.

所以你應該修改方法如下。

login(model: any){
  return this.http.post<IResponse<IUser>>(this.baseUrl 'auth/login', model).pipe(
    tap((response) => {
      const user = response.results;
      if(user){
        this.setCurrentUser(user);
      }
    })
  )
}

干杯

uj5u.com熱心網友回復：

似乎您的map pipeinAuthService.login方法應該回傳資料

login(model: any){
  return this.http.post(this.baseUrl 'auth/login', model).pipe(
    map((res:IUser) => {
      const user = res;
      if(user){
        this.setCurrentUser(user);
      }
      return res; // <- here
    })
  )
}

管道檔案https://www.learnrxjs.io/learn-rxjs/operators/transformation/map

標籤：

上一篇：如何使用C或C 以root身份運行命令，而在linux中沒有pam并使用密碼身份驗證

下一篇：Laravel7-臨時用戶