Angular中获取AccessToken并调用API时未返回值问题求助

原代码的核心问题 #

• 方法未返回Observable：getValues声明返回Observable<any>，但你没有从方法本身返回任何值——then回调里的return只是回调函数的返回值，不是getValues方法的返回值，导致调用这个方法的地方拿不到Observable。
• 请求头拼写错误：Authorizatoin应该是Authorization，拼写错误会导致后端无法识别认证头。
• 模板字符串语法错误：你用了单引号包裹'Bearer ${token}'，但模板变量${token}只有在反引号包裹的字符串里才会被解析，单引号里会直接当作字符串输出Bearer ${token}，而不是替换成实际token值。

修复后的代码 #

public getValues(): Observable<any> {
  // 将Promise转为Observable，确保方法返回正确类型
  return from(this.oauthService.getAccessToken()).pipe(
    switchMap(token => {
      // 修正拼写错误+用反引号解析模板变量
      const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
      return this.http.get<any>(this.systemUrl, { headers });
    })
  );
}

关键改进点解释 #

• from操作符：把getAccessToken()返回的Promise转换成Observable，这样能和Angular的HTTP请求（同样返回Observable）无缝结合。
• switchMap操作符：用于在拿到token后，发起HTTP请求并返回对应的Observable，保证整个方法的返回值是最终的HTTP请求Observable。
• 修正拼写与模板字符串：解决认证头不生效和token无法正确注入的问题。

额外优化建议 #

如果你的项目中很多请求都需要携带这个认证头，建议用HTTP拦截器统一处理，避免每个请求都重复写加token的逻辑：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private oauthService: OAuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return from(this.oauthService.getAccessToken()).pipe(
      switchMap(token => {
        const authReq = req.clone({
          headers: req.headers.set('Authorization', `Bearer ${token}`)
        });
        return next.handle(authReq);
      })
    );
  }
}

然后在AppModule的providers里注册拦截器：

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

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