码迷,mamicode.com
首页 > Web开发 > 详细

Angular4---认证---使用HttpClient拦截器,解决循环依赖引用的问题

时间:2018-03-09 16:15:08      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:ret   com   service   直接   ade   cto   头部   ring   嵌套   

  在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拦截器,解决循环依赖引用的问题

标签:ret   com   service   直接   ade   cto   头部   ring   嵌套   

原文地址:https://www.cnblogs.com/kingkangstudy/p/8534272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!