Angular项目中无法为Interface属性赋值问题求助

嘿，我来帮你拆解下你遇到的问题：

错误根源 #

你碰到的TypeError: Cannot set property 'Authorization' of undefined其实是两个小问题叠加导致的：

• 变量未初始化：你只声明了let accessToken: IServerAuthResponse;，但没有创建对应的实例对象，这时候accessToken的值是undefined，当然没法给它的Authorization属性赋值啦。
• 异步时序错误：http.post是异步操作，subscribe里的代码要等HTTP请求完成后才会执行，但你在订阅外面直接return of(accessToken)，这时候accessToken还没被赋值，返回的Observable自然拿不到正确的Token。

修复后的代码 #

直接用RxJS的操作符来处理异步流，同时正确初始化接口对象：

private authProvider(username: string, password: string): Observable<IServerAuthResponse> {
  return this.http.post<any>(CCommonUrl.LOGIN, { username, password }, { observe: 'response' })
    .pipe(
      map(res => {
        // 创建符合接口要求的对象实例
        const authResponse: IServerAuthResponse = {
          Authorization: res.headers.get('Authorization') || ''
        };
        console.log(res.headers);
        console.log(authResponse.Authorization);
        return authResponse;
      })
    );
}

为什么这样改？ #

• 解决未初始化问题：通过{ Authorization: ... }直接创建了符合IServerAuthResponse接口的对象，再也不会出现undefined的情况。
• 正确处理异步：用pipe和map在Observable的数据流里处理响应，这样返回的Observable会在请求完成后自动发出正确的认证响应对象，调用方直接订阅这个返回值就能拿到Token。
• 类型安全兜底：加了|| ''防止res.headers.get('Authorization')返回null，保证符合接口的类型要求。

小提醒 #

尽量不要在服务内部直接订阅HTTP请求（除非是那种不需要返回结果的场景），把Observable返回给调用方让他们去订阅，这样还能方便调用方处理错误（比如加catchError来捕获登录失败的情况）。

内容的提问来源于stack exchange，提问作者user_xyz.LOL