在angular4 项目中，每次请求服务端需要添加头部信息AccessToken作为认证的凭据。但如果在每次调用服务端就要写代码添加一个头部信息，会变得很麻烦。可以使用angular4的HttpClient来拦截每个请求，然后在头部添加上信息。
直接上代码实践
一、创建拦截器Service，实现HttpInterceptor的intercept方法
import { Injectable, Injector} from ‘@angular/core‘;import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from ‘@angular/common/http‘;import {Observable} from ‘rxjs/Observable‘;import ‘rxjs/add/operator/do‘;import {AuthenticationService} from ‘./auth/authentication.service‘; // 用于获得AccessToken的服务类import {environment} from ‘../../environments/environment‘;/** * HTTP拦截器,设置头部信息 */@Injectable()export class BaseHttpInterceptorService implements HttpInterceptor { ?authService: AuthenticationService; ?skipAuth: [string]; ?constructor(private inject: Injector) { ?// 用户登录或认证请求则不需要添加头部AccessToken信息 ???this.skipAuth = [ ?????`${environment.serverUrl}/api/v1/User/login`, ???]; ?} ?/** ??* 拦截器拦截请求 ??* @param {HttpRequest<any>} req ??* @param {HttpHandler} next ??* @returns {Observable<HttpEvent<any>>} ??*/ ?intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { ???this.authService = this.inject.get(AuthenticationService);// 注意此句 ???const req_started = Date.now(); ???let authReq; ???/** ????* 如果是跳过认证的链接，则不添加头部信息 ????*/ ???if (this.isSkipAuth(req.url)) { ?????authReq = req.clone(); ???}else { ?????const access_token = `Bearer ${this.authService.getAccessToken(‘563151811@qq.com‘)}`; ?????authReq = req.clone({ ???????setHeaders: { ?????????Authorization: access_token ???????} ?????}); ???} ???return next.handle(authReq).do(event => { ?????if (event instanceof HttpResponse) { ???????const elapsed = Date.now() - req_started; ???????console.log(`Request for ${req.urlWithParams} took ${elapsed} ms`); ?????} ???}); ?} ?/* ??*是否跳过添加头部认证 ?*/ ?isSkipAuth(url: string) { ???let isMatch = false; ???this.skipAuth.forEach((reg_url: string) => { ?????if ( !isMatch) { ???????if (url.search(reg_url) >= 0) { ?????????isMatch = true; ???????} ?????} ???}); ???return isMatch; ?}}二、注册拦截器，在APPModule中，添加如下代码
{ ?????provide: HTTP_INTERCEPTORS, ?????useClass: BaseHttpInterceptorService,// 上边定义的拦截器名字 ?????multi: true ???},三、每个请求服务端数据的Service依赖HttpClient，而不是http。
那么一个基础的拦截器已经完成了，但是，你会发现调用认证服务Service的时候，会报错：Cyclic dependency error with HttpInterceptor ，如果添加了第一步代码中注意点那段代码后，又会发现OK了。
这是依赖注入循环嵌套：A依赖B，B中又引用A。
官方文档中采用forwardRef，但是发现没用。在Stack Overflow中看到有人采用上述方法成功解决问题。https://github.com/angular/angular/issues/18224
如需要更详细的代码或有问题，请联系我
Angular4---认证---使用HttpClient拦截器，解决循环依赖引用的问题
原文地址：https://www.cnblogs.com/kingkangstudy/p/8534272.html