Angular 17报错：类型'Object'无法分配给类型'string'参数

错误原因 #

报错Argument of type 'Object' is not assignable to parameter of type 'string'是因为UserStorageService的saveUser方法期望接收字符串类型参数，但你传入的res.body是JavaScript对象（Angular HttpClient默认返回的res.body类型为Object），类型不匹配导致报错。

修复步骤 #

1. 修正AuthService中的saveUser调用 #

在login方法的map操作符里，将用户对象序列化为JSON字符串后再传入saveUser：

return this.http.post(BASIC_URL + 'authenticate', body, {headers, observe: 'response'}).pipe(
  map((res)=>{
    const token = res.headers.get('authorization')?.substring(7);
    const user = res.body;
    if(token && user){
      this.userStorageService.saveToken(token);
      // 将user对象转为JSON字符串
      this.userStorageService.saveUser(JSON.stringify(user));
      return true;
    }
    return false;
  })
);

注意：给res.headers.get('authorization')加上可选链?.，避免当header不存在时调用substring出现空指针错误。

2. 确保UserStorageService的逻辑正确 #

UserStorageService通常用于操作localStorage，而localStorage仅支持存储字符串，对应的方法应如下实现：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserStorageService {

  saveToken(token: string): void {
    localStorage.setItem('auth-token', token);
  }

  saveUser(user: string): void {
    localStorage.setItem('user', user);
  }

  // 获取用户时解析回对象
  getUser(): any {
    const userStr = localStorage.getItem('user');
    return userStr ? JSON.parse(userStr) : null;
  }

  getToken(): string | null {
    return localStorage.getItem('auth-token');
  }
}

3. 优化类型安全（可选但推荐） #

为避免any类型的潜在问题，建议定义User接口：

// src/app/models/user.model.ts
export interface User {
  id: number;
  username: string;
  email?: string;
  // 根据后端返回的用户字段补充
}

然后在AuthService中指定HTTP请求的返回类型：

import { User } from '../models/user.model';

// 修改login方法的http.post调用
return this.http.post<User>(BASIC_URL + 'authenticate', body, {headers, observe: 'response'}).pipe(
  map((res)=>{
    const token = res.headers.get('authorization')?.substring(7);
    const user = res.body;
    if(token && user){
      this.userStorageService.saveToken(token);
      this.userStorageService.saveUser(JSON.stringify(user));
      return true;
    }
    return false;
  })
);

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