angular 4 授权给每个http请求增加 token

2018/1/26 13:54:24 人评论 次浏览 分类:angular 插件

1, auth-http.ts

import { Http, Headers, ConnectionBackend, XHRBackend, RequestOptions, RequestOptionsArgs, Request, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import 'rxjs/Rx';

@Injectable()
export class AuthHttp extends Http {
    router:Router;
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, router: Router){
        super(backend,defaultOptions);
        this.router=router;
    }
    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>{
        options = this.addHeader(url,options);
        return this.intercept(super.request(url,options));
    }
    get(url: string, options?: RequestOptionsArgs): Observable<Response>{
        options = this.addHeader(url,options);
        return this.intercept(super.get(url,options));
    }
    post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response>{
        options = this.addHeader(url,options);
        return this.intercept(super.post(url,body, options));
    }
    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response>{
        options = this.addHeader(url,options);
        return this.intercept(super.put(url,body, options));
    }
    delete(url: string, options?: RequestOptionsArgs): Observable<Response>{
        options = this.addHeader(url,options);
        return this.intercept(super.delete(url,options));
    }
    patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>{
        options = this.addHeader(url,options);
        return this.intercept(super.patch(url,body, options));
    }
    intercept(observable: Observable<Response>): Observable<Response>{
        return <Observable<Response>> observable.catch((error, source) => {
            if (error.status === 401) {
                // console.log("token失效");
                // this.router.navigate(['login']);
            }
            return Observable.throw(error);
        });
    }
    addHeader(url: string | Request,options?: RequestOptionsArgs): RequestOptionsArgs{
        let gettoken = sessionStorage.getItem("authenticationtoken");
       if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
            if (!options) {
                options = new RequestOptions({})
                var authHeader = new Headers();
                options.headers = authHeader;
            }
            if(!options.headers){
                var authHeader = new Headers();
                options.headers = authHeader;
            }
            if(!options.headers){
                var authHeader = new Headers();
                options.headers=authHeader;
            }
            options.headers.set('Authorization', gettoken)
        } else {
            url.headers.set('Authorization', gettoken)
        }
        return options;
    }
 }
export function authHttpFactory(
    backend: XHRBackend,
    defaultOptions: RequestOptions,
    router: Router
) {
    return new AuthHttp(
        backend,
        defaultOptions,
        router
    );
};
export function authHttpProvider() {
    return {
        provide: Http,
        useFactory: authHttpFactory,
        deps: [
            XHRBackend,
            RequestOptions,
            Router
        ]
    };
};
2,app.module.ts
import { authHttpProvider } from './blocks/interceptor/auth-http';

providers: [authHttpProvider(), CacheService, CommonService],

附件下载

相关资源

  • NG-ZORRO

    这里是 Ant Design 的 Angular 5.0 实现,开发和服务于企业级后台产品。兼容版本当前支持Angular^5.0.0版本安装我们推荐使用 npm 方式进行开发,不仅可在开发环境轻松调试,也可放心地在生产环境打包部署使用,享受整个生态圈和工具链带来的诸多好处。$ npm install ng-zorro-…

    2018/1/24 20:42:55

共有访客发表了评论 网友评论

验证码: 看不清楚?