Angular2 拦截器(页面请求修改Url+headers传值+获取服务器返回的错误信息)

1.我们首先定义一个服务 <b>HttpInterceptorService</b>

//http-interceptor.service.ts

import { Injectable,Inject } from '@angular/core';
import { Http,Request,RequestOptionsArgs,Response,RequestOptions,ConnectionBackend,Headers } from '@angular/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Observable';
import { environment } from '../../../environments/environment';

import { StorageService } from './storage.service';
import { Router } from '@angular/router';

@Injectable()
export class HttpInterceptorService extends Http {

  status = {
        "status.400": "错误的请求。由于语法错误,该请求无法完成。",
        "status.401": "未经授权。服务器拒绝响应。",
        "status.403": "已禁止。服务器拒绝响应。",
        "status.404": "未找到。无法找到请求的位置。",
        "status.405": "方法不被允许。使用该位置不支持的请求方法进行了请求。",
        "status.406": "不可接受。服务器只生成客户端不接受的响应。",
        "status.407": "需要代理身份验证。客户端必须先使用代理对自身进行身份验证。",
        "status.408": "请求超时。等待请求的服务器超时。",
        "status.409": "冲突。由于请求中的冲突,无法完成该请求。",
        "status.410": "过期。请求页不再可用。",
        "status.411": "长度必需。未定义“内容长度”。",
        "status.412": "前提条件不满足。请求中给定的前提条件由服务器评估为 false。",
        "status.413": "请求实体太大。服务器不会接受请求,因为请求实体太大。",
        "status.414": "请求 URI 太长。服务器不会接受该请求,因为 URL 太长。",
        "status.415": "不支持的媒体类型。服务器不会接受该请求,因为媒体类型不受支持。",
        "status.416": "HTTP 状态代码 {0}",
        "status.500": "内部服务器错误。",
        "status.501": "未实现。服务器不识别该请求方法,或者服务器没有能力完成请求。",
        "status.503": "服务不可用。服务器当前不可用(过载或故障)。"
    };

  constructor(backend : ConnectionBackend, defaultOptions : RequestOptions,private router:Router,private storage : StorageService) { 
    super(backend, defaultOptions);
  }

    request(url : string | Request, options ? : RequestOptionsArgs) : Observable < Response > {

        // typeof url == 'string' ? (url = environment.api + url) : (url.url = environment.api + url.url);

        if (typeof url === 'string') {
          url = (url.indexOf('assets/') != -1 ? environment.self : environment.api) + url;
        } else {
          url.url = (url.url.indexOf('assets/') != -1 ? environment.self : environment.api) + url.url;



          //当我们才用这种方式来传headers的信息的时候下面的get,post等方法可以不写。
          //下面的那些get,post等方法是为了解决没有把头部信息传递过去写的。采用下面这段代码可以注释掉下面的get,post等方法
          //因为调用的request方法的时候http底层传递过来的是一个request对象。



          //url.headers.append('Content-Type345345', 'application/json543534');



        }

        //options = options || new RequestOptions();
        console.log("显示加载中。。。");
        console.log(options);
        
        return this.intercept(super.request(url, this.getRequestOptionArgs(options)));
    }
    get(url : string, options ? : RequestOptionsArgs) : Observable < Response > {
        return super.get(url, this.getRequestOptionArgs(options));
    }
    post(url : string, body : any, options
        ?
        : RequestOptionsArgs) : Observable < Response > {
        return super.post(url, body, this.getRequestOptionArgs(options));
    }
    put(url : string, body : any, options
        ?
        : RequestOptionsArgs) : Observable < Response > {
        return super.put(url, body, this.getRequestOptionArgs(options));
    }
    delete(url : string, options
        ?
        : RequestOptionsArgs) : Observable < Response > {
        return super.put(url, this.getRequestOptionArgs(options));
    }

    //修改headers参数信息

    getRequestOptionArgs(options ?: RequestOptionsArgs) : RequestOptionsArgs {
        if(options == null) {
            options = new RequestOptions();
        }
        if (options.headers == null) {
            options.headers = new Headers();
        }
        options.headers.append('Content-Type', 'application/json');
        options.headers.append("version",environment.version);
        if (this.storage.get("token")) {
            options.headers.append('token',this.storage.get('token'));
        }
        console.log(options);
        return options;
    }

    //请求发生错误是提示信息
    intercept(observable : Observable < Response >) : Observable < Response > {
        return observable.catch((err, source) => {
            console.log("关闭加载中。。。");  
            if (err.status < 200 || err.status >= 400) {
                console.log('网络错误:' + err.status + ' - ' + this.status['status.' + err.status]);
                //处理了当为   401   错误的时候我们清空localstorage里面的值,并让路由跳转
                if(err.status === 401) {
                    this.storage.reomveOther();
                    this.router.navigate(['/login']);
                }
                
                return Observable.throw(err);
            } else {
                return Observable.throw(err);
            }
        }).map(value=>{
          console.log("关闭加载中。。。");
          return value;
        });
    }

}
在app.model 里面注入
// app.model.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // this is needed!
import { NgModule } from '@angular/core';
import { HttpModule, Http ,XHRBackend,RequestOptions} from '@angular/http';
import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Router } from "@angular/router";

import { AppComponent } from './app.component';

import { CoreModule } from './core/core.module';
import { LayoutModule } from './layout/layout.module';
import { SharedModule } from './shared/shared.module';
import { RoutesModule } from './routes/routes.module';
import { ServiceModule } from './dnn/service/service.module';

import { HttpInterceptorService } from './dnn/service/http-interceptor.service';
import { StorageService } from './dnn/service/storage.service';

// https://github.com/ocombe/ng2-translate/issues/218
export function createTranslateLoader(http: Http) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

//在httpinterceptorserveice 里面用那些服务需要注入进来  这块是主要的
export function interceptorFactory(xhrBackend : XHRBackend, requestOptions : RequestOptions,router: Router,storage:StorageService) {
    let service = new HttpInterceptorService(xhrBackend, requestOptions,router,storage);
    return service;
}
//主要结束

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpModule,
        BrowserAnimationsModule, // required for ng2-tag-input
        CoreModule,
        LayoutModule,
        SharedModule.forRoot(),
        RoutesModule,
        ServiceModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [Http]
            }
        })
    ],
    providers: [
//这块是主要的
        {
            provide: Http,
            useFactory: interceptorFactory,
//在httpinterceptorserveice 里面用那些服务需要注入进来
            deps: [XHRBackend, RequestOptions,Router,StorageService]
        }
//主要结束
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
这样我们使用调用http时,会找写的这个服务。
//userApiservice

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';


@Injectable()
export class UserapiService {

  constructor(private http:Http) { }

  /**
   * 登录
   * @param user 用户对象 用户名,密码
   */
  apilogin(user:object):Promise<any>{
    return this.http.post('pub/login',user).toPromise().then(response=>{
      return response.json() as any[];
    });
  }
}

我们调用userapiservice里面的apilogin方法时会走我们定义的拦截器服务。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cmazxiaoma的架构师之路

MyEclipse使用Git进行Push to Upstream报错 学习笔记

10120
来自专栏移动端周边技术扩展

https和http连接过程

第一次:建立连接时,客户端发送syn(syn=j)包到服务器,并进入syn_sent状态,等待服务器确认。 第二次:服务器收到syn包,必须确认客户端的syn...

11910
来自专栏散尽浮华

Nginx的https配置记录以及http强制跳转到https的方法梳理

一、Nginx安装(略) 安装的时候需要注意加上 --with-http_ssl_module,因为http_ssl_module不属于Nginx的基本模块。 ...

898100
来自专栏张戈的专栏

Linux系统编译安装Redis以及主从复制配置小记

Redis 的安装配置很简单,而且很早之前就装过 Redis,可这几天再次安装时居然又遗忘了一些细节,看来好记性不如烂笔头,还是在博客记录一下比较好,至少不用总...

29230
来自专栏Youngxj

emlog后台登录失败邮件通知

13130
来自专栏惨绿少年

SSH服务详解

第1章 SSH服务 1.1 SSH服务协议说明 SSH 是 Secure Shell Protocol 的简写,由 IETF 网络工作小组(Network Wo...

46500
来自专栏云计算教程系列

如何在CentOS 7上安装和配置ownCloud

ownCloud是一个文件共享服务器,允许您将个人内容(如文档和图片)集中存储在此位置,就像Dropbox一样。与ownCloud的不同之处在于它是免费的开源软...

97900
来自专栏云计算教程系列

如何在Ubuntu 18.04上为用户目录设置vsftpd

FTP是文件传输协议的缩写,是一种曾经广泛用于在客户端和服务器之间移动文件的网络协议。它已被更快,更安全,更方便的文件传输方式所取代。许多普通网民希望通过htt...

13200
来自专栏PHP在线

从输入url开始能做哪些优化

此文主要讲的事情是如何让用户快点看到首屏页面,其主要影响因素是延迟和解析渲染耗时。有关安全部分其实也是优化的一部分。我们着重说下网络部分。

15340
来自专栏www.96php.cn

【thinkphp】极验3.0的配置方法

ThinkPHP\Library\Vendor\Geetest\Geetestlib.php <?php /**  * 极验行为式验证安全平台,php 网站主...

52170

扫码关注云+社区

领取腾讯云代金券