配置Angular的全局身份验证HTTP标头的正确方法是什么?

Question

我正在尝试在Angular 2应用程序中添加基于JWT的身份验证。

我收到了Auth0的iDtoken，并将其存储在LocalStorage中。现在，我想确保所有传出的HTTP调用我的API都将具有此标头设置：

授权：持有人E3rere ....

当然，我可以在每个HTTP调用中手动添加它。但是，一劳永逸地配置它会更方便。

在Angular中这样做的正确方法是什么？（角2）

Answer 1

我在我的authservice中添加了一种方法，该方法处理了创建标题

@Injectable()
export class AuthenticationService {
    //Other stuff your authentication service might do
    getHeaderWithAuthorization() {
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser && currentUser.Token) {
            let headers = new Headers({ 'Content-Type': 'application/json' });
            headers.append('Authorization', 'Bearer ' + currentUser.Token);
            return new RequestOptions({ headers: headers });
        }
    }
}

@Injectable()
export class UserService {
    private baseUrl;
    private options: RequestOptions;
    constructor(private http: Http, private authService: AuthenticationService)             
{
        this.baseUrl = "/api/User/";
        this.options = authService.getHeaderWithAuthorization();
    }
    SaveUser(user) {
        return this.http.post(this.baseUrl + "SaveUser", user, this.options)
            .map((res) => res.json());
    }
}

Answer 2

我不确定这是否会被视为最佳解决方案，但我发现它非常有用。

我将此功能添加到app.module.ts：

 export function authHttpServiceFactory(http: Http, options: RequestOptions, auth: AuthService) {
   return new AuthHttp( new AuthConfig(
       {
         tokenName: 'id_token',
         globalHeaders: [{'Content-Type': 'application/json'}],
         tokenGetter: (() => localStorage.getItem('id_token'))
       }
     ), http, options);
 }
...
providers: [...{
  provide: AuthHttp,
  useFactory: authHttpServiceFactory,
  deps: [ Http, RequestOptions, AuthService ]
},...]

最后，我将确保我的服务取决于authhttp而不是http。

Answer 3

方法1：

如果您使用的是Angular 4.3 ，则可以为此目的创建一个拦截器，该拦截器将充当中介。

注意：为了使用Interceptor使用HTTPCLIENT而不是HTTP Service，这是Angular 4.3的新增加，这将为您提供比HTTP服务的好处。

如果用户登录，可以添加标头。

@Injectable()
export class AddHeaderInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       if(UserService.getToken()){
         req.headers.set('Authorization', 'Bearer ' + UserService.getToken());
       }
        return next.handle(req);
    }
}

重要：不要忘记在应用模块中提供拦截器类。

import {HTTP_INTERCEPTORS} from '@angular/common/http';
@NgModule({
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: AddHeaderInterceptor,
    multi: true,
  }],
})

方法2：

如果您使用的版本大于4.3.0，则可以调整其他方法，例如将basequestoptions扩展到所有请求中注入常见标题。

   import {BaseRequestOptions} from '@angular/http';
   @Injectable()
   export class AdddingHeaderOptions extends BaseRequestOptions {
        constructor() {
            super();
            if(UserService.getToken()){
                this.headers.append('X-Requested-With', 'XMLHttpRequest');
                this.headers.append('Authorization', 'Bearer ' + UserService.getToken());
            }
        }
    }

现在，您可以将其提供给应用模块文件。

@NgModule({
    providers   : [
        {provide: RequestOptions, useClass: AdddingHeaderOptions }
    ]
})