AngularJS：401 - 未经授权：具有基本身份验证的 HttpInterceptor答案

【问题标题】：AngularJS: 401 - Unauthorized: HttpInterceptor with Basic AuthAngularJS：401 - 未经授权：具有基本身份验证的 HttpInterceptor
【发布时间】：2018-09-12 10:20:46
【问题描述】：

我想调用 Rest-Service (Spring MVC) 来接收发布列表。在客户端（AngularJs）我使用创建 HttpClient 调用的服务。我还有一个注册的 HttpInterceptor 来使用简单的基本身份验证。拦截器在 app.modules.ts 中提供，在其余调用期间调用。

不幸的是，我收到状态码 401，但在标题中找不到“身份验证”条目。缺少什么？

拦截器：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class BasicAuthInterceptor implements HttpInterceptor {


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  request = request.clone({
    setHeaders: {
      Authorization: `Basic username:password`
    },
  }); 


  return next.handle(request);
  }
}

服务类：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs/';
import { HttpClient } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
import { Release } from './Release';

@Injectable()
export class ReleasesService {

  constructor(
    private http: HttpClient) {}

  private releasesUrl = 'http://localhost:8080/releases/showAll';

  getReleases(): Observable<Release[]> {
    return this.http
      .get<Release[]>(this.releasesUrl)
      .pipe( tap(releases => this.log('fetched releases')),
         catchError(this.handleError('getReleases', [])));
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error); // log to console instead
      return of(result as T);
   };
  }

  private log(message: string) {
    console.info(message);
  }
}

app.modules.ts

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

【问题讨论】：

标签： angularjs basic-authentication

【解决方案1】：

我找到了解决办法。

设置标题是正确的。但我必须在 HttpClient 调用中添加以下参数：{ withCredentials: true }

getReleases(): Observable<Release[]> {
return this.http
  .get<Release[]>(this.releasesUrl, { withCredentials: true })
  .pipe( tap(releases => this.log('fetched releases')),
     catchError(this.handleError('getReleases', [])));

}

然后凭据被传递到服务器。

【讨论】：