Angular2 Http拦截器 Interceptor 实现

是这样的,由于前面文章中前端和后台整合的不是太好,开发阶段前端和后端肯定是分开的,这样就导致前端请求数据时地址不对。于是我准备做一个配置文件,在请求时更改url地址,便有了Http拦截器的需求。
网上Angular1拦截器写法比较多,Angular2比较少,github一下,看到确实有大神实现了Angular2的实现。毕竟是大神,不屑与代码细节说明,没有现成的例子,只有相关说明,于是开始按照大神说明来coding 了。
大半夜了,写的真心累csnd编辑器有问题。
使用项目地址 https://github.com/voliva/angular2-interceptors

1、在项目的根目录执行,安装ng2-interceptors

npm install ng2-interceptors --save

2、创建类文件src/app/core/http/server.url.interceptor.ts

import { Interceptor, InterceptedRequest, InterceptedResponse } 
from 'ng2-interceptors';

export class ServerURLInterceptor implements Interceptor {
    public interceptBefore(request: InterceptedRequest): InterceptedRequest {
        // 修改请求
      request.url = "http://localhost:8080/ovit-java-framework/"+request.url;
      console.log("intercept url:"+request.url);
      return request; 
    }
    public interceptAfter(response: InterceptedResponse): InterceptedResponse {
        return response;
    }

}

3、修改网络请求服务,将注入的Http 换成 InterceptorService

constructor(private http: Http) { }
constructor(private http: InterceptorService ){ }

内容如下src/app/core/auth/auth.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { InterceptorService  } from 'ng2-interceptors';
import 'rxjs/add/operator/toPromise';

import { Session } from './session'; 
import { User } from '../user/user'; 

@Injectable()
export class AuthService {

  private headers = new Headers({'Content-Type': 'application/json'});
  session: Session;
  constructor(private http: InterceptorService ) { }
 
  // 登陆
  private url_authLogin = 'auth/login';
  login(account:string,password:string):Promise<User> {

        console.log("登陆:"+account+","+password);
    return this.http.post(this.url_authLogin,
                JSON.stringify({account:account,password:password}))
               .toPromise()
               .then(response => response.json().data as User  )
               .catch(this.handleError); 
  } 

  // 注销
  private url_authLogout = 'auth/logout'; 
  logout(userId: string): Promise<void> { 
     this.session.user  = null;
    return this.http.post(this.url_authLogout,
       JSON.stringify({userId:userId}), {headers: this.headers})
      .toPromise()
      .then(() => null)
      .catch(this.handleError); 
  }
  private handleError(error: any): Promise<any> {
    console.error('发生错误', error); 
    return Promise.reject(error.message || error);
  }
}

4、修改src/app/app.module.ts

import { provideInterceptorService  } from 'ng2-interceptors'; 
import { ServerURLInterceptor } from './core/http/server.url.interceptor';

  providers: [
    LocalStorage,AuthService,UserService,ServerURLInterceptor, 
    provideInterceptorService([
      ServerURLInterceptor
    ]) 
  ],

全部内容如下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { provideInterceptorService  } from 'ng2-interceptors'; 
import { ServerURLInterceptor } from './core/http/server.url.interceptor';

import './rxjs-extensions';

import { LocalStorage } from './core/common/local.storage';

import { AppComponent } from './app.component';
import { IndexComponent } from './index/index.component';
import { MainComponent } from './main/main.component';
import { HelpComponent } from './help/help.component';

import { Session } from './core/auth/session';

import { AuthService } from './core/auth/auth.service';
import { UserService } from './core/user/user.service';

import { AppRoutingModule }     from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule, 
    NgbModule.forRoot()
  ],
  declarations: [
    AppComponent,IndexComponent,MainComponent,HelpComponent
  ],
  providers: [
    LocalStorage,AuthService,UserService,ServerURLInterceptor, 
    provideInterceptorService([
      ServerURLInterceptor
    ]) 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的其它博客将同步更新:
CSDN
简书
github

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,329评论 25 707
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,653评论 8 183
  • 我 你 他 爱 ? 爱 不知道啊 饥人谷
    Komolei阅读 114评论 0 0
  • 身边每每有一些洒脱之士,常常将诸如“钱财乃身外之物,生不带来死不带去,其一点也不看重钱财,工作也不是因为钱”之...
    胡美云阅读 208评论 1 0
  • 1)商量;协商,协议,磋商;商谈;商定,一致的意见。〔話し合い。協議する。口頭の商谈。相談して決める〕。 友達と相...
    萌囧囧阅读 797评论 6 0