import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable } from "rxjs/Observable";
import { Adal4Service } from '../adal/adal4.service';
import { Router } from '@angular/router'; @Injectable()
export class AuthInterceptor implements HttpInterceptor { constructor(
private adalService: Adal4Service,
private router: Router
) { } intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const resource = this.adalService.GetResourceForEndpoint(request.url);
let authenticatedCall: Observable<HttpEvent<any>>;
if (resource) {
if (this.adalService.userInfo.authenticated) {
authenticatedCall = this.adalService.acquireToken(resource)
.flatMap((token: string) => {
request = request.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
return next.handle(request).catch(this.handleError);
});
}
else {
this.adalService.refreshDataFromCache();
authenticatedCall = Observable.throw(new Error('User Not Authenticated.'));
}
}
else { authenticatedCall = next.handle(request).catch(this.handleError); } return authenticatedCall;
} private handleError(err: HttpErrorResponse): Observable<any> {
if (err.status === 401 || err.status === 403) {
console.log(err.message);
this.router.navigate(['dataService'], {});
return Observable.of(err.message);
}
// handle your auth error or rethrow
return Observable.throw(err);
}
}

Adal4Interceptor

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable'; import { Adal4Service } from './adal4.service'; @Injectable()
export class Adal4Interceptor implements HttpInterceptor {
constructor(public adal4Service: Adal4Service) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { request = request.clone({
setHeaders: {
Authorization: `Bearer ${this.adal4Service.userInfo.token}`
}
});
return next.handle(request);
}
}

adal4service

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Adal4User } from './adal4-user';
import * as adalLib from 'adal-angular';
import { adal } from 'adal-angular'; import User = adal.User; @Injectable()
export class Adal4Service { private adalContext: adal.AuthenticationContext; private adal4User: Adal4User = {
authenticated: false,
username: '',
error: '',
token: '',
profile: {}
}; constructor() { } public init(configOptions: adal.Config) {
if (!configOptions) {
throw new Error('You must set config, when calling init.');
} const existingHash = window.location.hash; let pathDefault = window.location.href;
if (existingHash) {
pathDefault = pathDefault.replace(existingHash, '');
} configOptions.redirectUri = configOptions.redirectUri || pathDefault;
configOptions.postLogoutRedirectUri = configOptions.postLogoutRedirectUri || pathDefault; this.adalContext = adalLib.inject(configOptions); window.AuthenticationContext = this.adalContext.constructor; this.updateDataFromCache(this.adalContext.config.loginResource);
} public get config(): adal.Config {
return this.adalContext.config;
} public get userInfo(): Adal4User {
return this.adal4User;
} public login(): void {
this.adalContext.login();
} public loginInProgress(): boolean {
return this.adalContext.loginInProgress();
} public logOut(): void {
this.adalContext.logOut();
} public handleWindowCallback(): void {
const hash = window.location.hash;
if (this.adalContext.isCallback(hash)) {
const requestInfo = this.adalContext.getRequestInfo(hash);
this.adalContext.saveTokenFromHash(requestInfo);
if (requestInfo.requestType === this.adalContext.REQUEST_TYPE.LOGIN) {
this.updateDataFromCache(this.adalContext.config.loginResource); } else if (requestInfo.requestType === this.adalContext.REQUEST_TYPE.RENEW_TOKEN) {
this.adalContext.callback = window.parent.callBackMappedToRenewStates[requestInfo.stateResponse];
} if (requestInfo.stateMatch) {
if (typeof this.adalContext.callback === 'function') {
if (requestInfo.requestType === this.adalContext.REQUEST_TYPE.RENEW_TOKEN) {
if (requestInfo.parameters['access_token']) {
this.adalContext.callback(this.adalContext._getItem(this.adalContext.CONSTANTS.STORAGE.ERROR_DESCRIPTION)
, requestInfo.parameters['access_token']);
}
else if (requestInfo.parameters['error']) {
this.adalContext.callback(this.adalContext._getItem(this.adalContext.CONSTANTS.STORAGE.ERROR_DESCRIPTION), null);
this.adalContext._renewFailed = true;
}
}
}
}
} if (window.location.hash) {
window.location.href = window.location.href.replace(window.location.hash, '');
}
} public getCachedToken(resource: string): string {
return this.adalContext.getCachedToken(resource);
} public acquireToken(resource: string) {
const _this = this; let errorMessage: string;
return Observable.bindCallback(acquireTokenInternal, function (token: string) {
if (!token && errorMessage) {
throw (errorMessage);
}
return token;
})(); function acquireTokenInternal(cb: any) {
let s: string = null; _this.adalContext.acquireToken(resource, (error: string, tokenOut: string) => {
if (error) {
_this.adalContext.error('Error when acquiring token for resource: ' + resource, error);
errorMessage = error;
cb(<string>null);
} else {
cb(tokenOut);
s = tokenOut;
}
});
return s;
}
} public getUser(): Observable<any> {
return Observable.bindCallback((cb: (u: adal.User) => User) => {
this.adalContext.getUser(function (error: string, user: adal.User) {
if (error) {
this.adalContext.error('Error when getting user', error);
cb(null);
} else {
cb(user);
}
});
})();
} public clearCache(): void {
this.adalContext.clearCache();
} public clearCacheForResource(resource: string): void {
this.adalContext.clearCacheForResource(resource);
} public info(message: string): void {
this.adalContext.info(message);
} public verbose(message: string): void {
this.adalContext.verbose(message);
} public GetResourceForEndpoint(url: string): string {
return this.adalContext.getResourceForEndpoint(url);
} public refreshDataFromCache() {
this.updateDataFromCache(this.adalContext.config.loginResource);
} private updateDataFromCache(resource: string): void {
const token = this.adalContext.getCachedToken(resource);
this.adal4User.authenticated = token !== null && token.length > 0;
const user = this.adalContext.getCachedUser() || { userName: '', profile: undefined };
if (user) {
this.adal4User.username = user.userName;
this.adal4User.profile = user.profile;
this.adal4User.token = token;
this.adal4User.error = this.adalContext.getLoginError();
} else {
this.adal4User.username = '';
this.adal4User.profile = {};
this.adal4User.token = '';
this.adal4User.error = '';
}
};
}

Adal4User

export class Adal4User {
authenticated: boolean;
username: string;
error: string;
profile: any;
token: string;
}

adal-angular.d

declare var AuthenticationContext: adal.AuthenticationContextStatic;

declare namespace adal {

    interface Config {
tenant?: string;
clientId: string;
redirectUri?: string;
instance?: string;
endpoints?: any;
popUp?: boolean;
localLoginUrl?: string;
displayCall?: (urlNavigate: string) => any;
postLogoutRedirectUri?: string;
cacheLocation?: string;
anonymousEndpoints?: string[];
expireOffsetSeconds?: number;
correlationId?: string;
loginResource?: string;
resource?: string;
extraQueryParameter?: string;
navigateToLoginRequestUrl?: boolean;
} interface User {
userName: string;
profile: any;
} interface RequestInfo {
valid: boolean;
parameters: any;
stateMatch: boolean;
stateResponse: string;
requestType: string;
} interface AuthenticationContextStatic {
new (config: Config): AuthenticationContext;
} interface AuthenticationContext { CONSTANTS: any; REQUEST_TYPE: {
LOGIN: string,
RENEW_TOKEN: string,
UNKNOWN: string
}; callback: any; _getItem: any; _renewFailed: any; instance: string;
config: Config; login(): void; loginInProgress(): boolean; getCachedToken(resource: string): string; getCachedUser(): User; registerCallback(expectedState: string, resource: string, callback: (message: string, token: string) => any): void; acquireToken(resource: string, callback: (message: string, token: string) => any): void; promptUser(urlNavigate: string): void; clearCache(): void; clearCacheForResource(resource: string): void; logOut(): void; getUser(callback: (message: string, user?: User) => any): void; isCallback(hash: string): boolean; getLoginError(): string; getRequestInfo(hash: string): RequestInfo; saveTokenFromHash(requestInfo: RequestInfo): void; getResourceForEndpoint(endpoint: string): string; handleWindowCallback(): void; log(level: number, message: string, error: any): void;
error(message: string, error: any): void;
warn(message: string): void;
info(message: string): void;
verbose(message: string): void;
}
} interface Window {
AuthenticationContext: any;
callBackMappedToRenewStates: any;
}

logged-in.guard

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Adal4Service } from './adal4.service'; @Injectable()
export class LoggedInGuard implements CanActivate{ constructor(private adalService: Adal4Service,
) {
} canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): boolean {
this.adalService.handleWindowCallback();
if (this.adalService.userInfo.authenticated) {
return true;
} else {
this.adalService.login();
return false;
}
}
}

【angular5项目积累总结】结合adal4实现http拦截器(token)的更多相关文章

  1. 【angular5项目积累总结】遇到的一些问题以及解决办法

    1.项目中字符串特别是\r\n,替换成br之后,在页面换行无法生效? 答:绑定元素 innerHTML. <div class="panel-body" [innerHTML ...

  2. 【angular5项目积累总结】avatar组件

    View Code import { Component, HostListener, ElementRef } from '@angular/core'; import { Adal4Service ...

  3. 【angular5项目积累总结】优秀组件以及应用实例

    1.手机端 图片预览组件 组件:sideshow 效果图:(预览图全屏 且可以左右移动)                  code: <div class="row ui-app-s ...

  4. 【angular5项目积累总结】消息订阅服务

    code import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable ...

  5. 【angular5项目积累总结】侧栏菜单 navmenu

    View Code import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/co ...

  6. 【angular5项目积累总结】breadcrumb面包屑组件

    view code <div class="fxs-breadcrumb-wrapper" aria-label="Navigation history" ...

  7. 【angular5项目积累总结】文件上传

    <div class="form-group row"> <label class="col-sm-2 col-form-label"> ...

  8. 【angular5项目积累总结】文件下载

    download() { const token = localStorage.getItem('token'); let headers: HttpHeaders = new HttpHeaders ...

  9. 【angular5项目积累总结】自定义管道 OrderBy

    import { Injectable, Pipe } from '@angular/core'; @Pipe({ name: 'orderBy' }) @Injectable() export cl ...

随机推荐

  1. ASP.NET Web API 框架研究 Web Host模式下的消息处理管道

    寄宿的作用是开启一个进程为Web API提供一个运行环境以解决持续监听.请求监听和响应回复,即将接收到的请求转换成HttpRequestMessage对象传入管道,并将管道生成并经过处理后的HttpR ...

  2. Network in Network 2

    <Network in Network>论文笔记 1.综述 这篇文章有两个很重要的观点: 1×1卷积的使用 文中提出使用mlpconv网络层替代传统的convolution层.mlp层实际 ...

  3. 经过实际验证的C#调用Haskell的方法

    [系统环境] Windows Server 2008 R2,Haskell Platform 2013.2.0.0,ghc 7.6.3,cabal 1.16.0 [操作步骤] 1. 安装Windows ...

  4. TaskCreationOptions.LongRunning 运行比可用线程数更多的任务

    最近在学WebSocket,服务端需要监听多个WebSocket客户端发送的消息. 开始的解决方法是每个WebSocket客户端都添加一个线程进行监听,代码如下: /// <summary> ...

  5. wpf 导出Excel

    private void Button_Click_1(object sender, RoutedEventArgs e) { ExportDataGridSaveAs(true, this.data ...

  6. .gitignore总结

    git进行管理时,.gitignore是必不可少的,可以指定不需要提交到仓库的资源.最好在git init之后就创建 .gitignore文件,这是个好习惯,常用的配置及说明如下:

  7. odoo开发环境搭建(三):安装odoo依赖的python包

    odoo开发环境搭建(三):安装odoo依赖的python包 http://www.cnblogs.com/jlzhou/p/5940815.html

  8. 【原创】Dependency Walker

    https://zh.wikipedia.org/wiki/Dependency_Walker For situations where the system says it can’t find s ...

  9. IDEA快捷键--与Eclipse快捷键的对比--IDEA快捷键设置成Eclipse默认快捷键

    部分内容转载于:http://blog.csdn.net/dc_726/article/details/9531281 IntelliJ Idea 常用快捷键列表 Ctrl+Alt+t 选择代码块 t ...

  10. Java 多线程学习笔记:生产者消费者问题

    前言:最近在学习Java多线程,看到ImportNew网上有网友翻译的一篇文章<阻塞队列实现生产者消费者模式>.在文中,使用的是Java的concurrent包中的阻塞队列来实现.在看完后 ...