angular访问后台服务及监控会话超时的封装实现

以前一直没有想过写一些东西来把项目中用到的知识点及技术实现做一个归纳整理并分享出来。现在打算逐渐的把项目中的一些东西整理并分享出来，与大家共勉！

angular本身自带访问组件http和httpclient，组件本身都是异步模式访问。本文只列举了对http组件的封装同时也一同处理会话超时监控。

实现思路概述：

1、将请求入参和出参统一约定

2、封装方法将请求参数、数据处理方法、数据呈现方法、访问错误处理方法封装在一起，业务调用通过服务调用该封装方法，
同时把请求参数、数据处理方法、数据呈现方法、访问错误处理方法传过来即可

3、在每次请求交互时，都会记录当前请求时间。系统工作台组件中增加监控处理，判断是否超时，超时分钟可自定义

下面是相关实现代码：

1、封装方法

import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpModule, Headers, Http, Response, Request, RequestOptionsArgs, ResponseOptionsArgs, RequestOptions } from '@angular/http';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

//使用三方js库
declare var CryptoJS:any;

@Injectable()
export class CommonRootService {

constructor(private http: Http) { }

//AES加密
public encrypt(word: string, key: string, iv: string): string {
let keys = CryptoJS.enc.Utf8.parse(key);
let ivs = CryptoJS.enc.Utf8.parse(iv);
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, keys, { iv: ivs, mode: CryptoJS.mode.CBC });
return encrypted.toString();
}

public decrypt(word: string, key: string, iv: string) {
let keys = CryptoJS.enc.Utf8.parse(key);
let ivs = CryptoJS.enc.Utf8.parse(iv);
let decrypt = CryptoJS.AES.decrypt(word, keys, { iv: ivs, mode: CryptoJS.mode.CBC });
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}

public delayTimeMS(msseconds: number = 0): void {
for (let t = Date.now(); Date.now() - t <= msseconds;);
}

//Manage onlineTime,记录当前在线时间
public sessionMgt_onlineTime(currrOnLineTime: string, actionflag: string): any {
var resobjs: any;
if (actionflag == "R") {
if (localStorage.getItem("sessiononlineTime") != null && localStorage.getItem("sessiononlineTime").toString() != "") {
resobjs = localStorage.getItem("sessiononlineTime");
}
}
else if (actionflag == "S") {
localStorage.setItem("sessiononlineTime", currrOnLineTime);
}
else if (actionflag == "D") {
localStorage.removeItem('sessiononlineTime');
}
return resobjs;
}

//整体封装localStorage session管理
public sessionMgt(sessionName:string, sessionValue: string, actionflag: string): any {
let resobjs: any;
let sessionNames:string = "session" + sessionName;
if (actionflag == "R") {
if (localStorage.getItem(sessionNames) != null && localStorage.getItem(sessionNames).toString() != "") {
resobjs = localStorage.getItem(sessionNames);
}
}
else if (actionflag == "S") {
localStorage.setItem(sessionNames, sessionValue);
}
else if (actionflag == "D") {
localStorage.removeItem(sessionNames);
}
return resobjs;
}

//http encapsulation
public getHttpInfoData(reqdata: RequestParams, resdataFunc: any, displayresdataFunc: any, errorFunc: any): void {
if (reqdata.Reqmethod == "") {
reqdata.Reqmethod = "get";
}
if (reqdata.ReqdataType == "") {
reqdata.ReqdataType = "application/json";
}
let dataTypeStr = 'json';
let currReqAddr: string = this.getCurrServAddr(reqdata);
let selecttoken: string = this.sessionMgt("getToken", "", "R"); //读取令牌

this.sessionMgt_onlineTime(new Date().toJSON(), "S"); //设置当前交互时间

//let headers = new Headers({ 'Content-Type': reqdata.ReqdataType, dataType: dataTypeStr, 'Authorization': 'Basic ' + btoa("" + ":" + selecttoken) });
let headers = new Headers({ 'Content-Type': reqdata.ReqdataType, 'token': selecttoken });
let options = new RequestOptions({ headers: headers });

let bizparams: any = { 'req': JSON.stringify(reqdata) };

if (reqdata.Reqmethod == "post") {
this.http.post(currReqAddr, bizparams, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
else {
this.http.get(currReqAddr, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
}
//http encapsulation with token
public getHttpInfoDataAuth(reqdata: RequestParams, resdataFunc: any, displayresdataFunc: any, errorFunc: any): void {
if (reqdata.Reqmethod == "") {
reqdata.Reqmethod = "get";
}
if (reqdata.ReqdataType == "") {
reqdata.ReqdataType = "application/json";
}
let dataTypeStr = 'json';
let currReqAddr: string = this.getCurrServAddr(reqdata);
let selecttoken: string = this.sessionMgt("getToken", "", "R"); //读取令牌

this.sessionMgt_onlineTime(new Date().toJSON(), "S"); //设置当前交互时间

//let headers = new Headers({ 'Content-Type': reqdata.ReqdataType, dataType: dataTypeStr, 'Authorization': 'Basic ' + btoa("" + ":" + selecttoken) });
let headers = new Headers({ 'Content-Type': reqdata.ReqdataType, 'token': selecttoken });
let options = new RequestOptions({ headers: headers });

let bizparams: any = { 'req': JSON.stringify(reqdata) };

if (reqdata.Reqmethod == "post") {
this.http.post(currReqAddr, bizparams, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
else {
this.http.get(currReqAddr, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
}

public getHandlerError(error: Response | any, userErrFunc: any) {
let errMsg: string;
if (error instanceof Response) {
let body = error.json() || '';
let err = body.error || JSON.stringify(body);
errMsg = err;
} else {
errMsg = error.message ? error.message : error.toString();
}
userErrFunc(errMsg);
return Observable.throw(errMsg);
}

//http encapsulation webapi请求
public getHttpInfoDataWebapi(reqdata: Reqobj, resdataFunc: any, displayresdataFunc: any, errorFunc: any): void {
if (reqdata.reqmethod == "") {
reqdata.reqmethod = "get";
}
if (reqdata.reqdatatype == "") {
reqdata.reqdatatype = "application/json; charset=utf-8"; 
//reqdata.reqdatatype = "application/x-www-form-urlencoded;charset=UTF-8";
}
let dataTypeStr = 'json';

let selecttoken: string = this.sessionMgt("getToken", "", "R"); //读取令牌
this.sessionMgt_onlineTime(new Date().toJSON(), "S"); //设置当前交互时间

let headers = new Headers();
headers.append('Content-Type', reqdata.reqdatatype); 
let options = new RequestOptions({ headers: headers});

if (reqdata.reqmethod == "post") {
this.http.post(reqdata.dataUrl, reqdata, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
else {
this.http.get(reqdata.dataUrl, options)
.map(resdataFunc)
.catch(err => this.getHandlerError(err, errorFunc))
.subscribe(displayresdataFunc)
}
}

//获取当前服务
public getCurrentServ(serviden: string, versioniden: string, servtype: string, servconfig: any): any {
let reqServ = {}; //返回当前服务 
if (servconfig != "" && servconfig != undefined) {
let servconfigArrr: any = JSON.parse(servconfig);
if (servconfigArrr.length > 0) {
for (let i = 0; i < servconfigArrr.length; i++) {
if (servconfigArrr[i]["serviden"] == serviden && servconfigArrr[i]["version"] == versioniden) {
reqServ = servconfigArrr[i];
break;
}
}
}
}

return reqServ;
}

//获取当前请求地址
//reqdata.Addrtype参数值为nodecenter(节点中心地址)、xxx(业务节点地址)、terminal(终端网页地址)
public getCurrServAddr(reqdata: RequestParams): string {
let resServAddr: string = "";
let servconfigmgt: any = this.getCurrentServ(reqdata.ServIdentifer, reqdata.ServVersionIden, reqdata.ServVersionIden, this.getUseServices());
if (servconfigmgt) {
if (servconfigmgt.url_addr != "" && servconfigmgt.url_addr != undefined) {
resServAddr = servconfigmgt.url_addr + "/" + servconfigmgt.servcodename + reqdata.GetDataUrl;
}
else {
if (reqdata.AddrType == "nodecenter") {
//TODO 预留自动监控节点中心状态，变更可用节点中心地址
let nodecenterobj: any = JSON.parse(this.sessionMgt("getNodeCenterAddr", "", "R"));
let nodecenteraddress: string = "";
if (nodecenterobj.master_node_state == "1") {
nodecenteraddress = nodecenterobj.master_node;
}
else if (nodecenterobj.slave_node_state == "1") {
nodecenteraddress = nodecenterobj.slave_node;
}
resServAddr = nodecenteraddress + "/" + servconfigmgt.servcodename + reqdata.GetDataUrl;
//resServAddr = "/api/" + servconfigmgt.servcodename + reqdata.GetDataUrl; 
} 
else if (reqdata.AddrType == "terminal") {
resServAddr = reqdata.GetDataUrl;
}
else if (reqdata.AddrType == "PlcService") {
resServAddr = reqdata.Reqtype + reqdata.GetDataUrl;
}
else {
//获取请求模块当前可用节点地址
let bizNodeList:any[] = JSON.parse(this.sessionMgt("getBizNodeAddr", "", "R"));
let moudineAdd:string = "";
for (let i = 0; i < bizNodeList.length; i++) {
if (bizNodeList[i].Moudiden == reqdata.AddrType) {
moudineAdd = bizNodeList[i].Url_addr;
break;
}
}
resServAddr = moudineAdd + "/" + servconfigmgt.servcodename + reqdata.GetDataUrl;
}
}
}

return resServAddr;
}

//计算时间差,resFlag表示时间差的类型 d 相差天数 h 相差小时数 m 相差分钟数 s 相差秒数, ms 相差秒数,其他后续再扩展 
public dateTimeSeg(startTimeStr: string, endTimeStr: string, resFlag: string): number {
let difValue: number = 0; //相差的数值

let startTime: Date = new Date(startTimeStr);
let endTime: Date = new Date(endTimeStr);

let startDateMS: number = startTime.getTime(); //到日期的毫秒数
let endDateMS: number = endTime.getTime(); //到日期的毫秒数
//相差总毫秒数
let tottleDiffMS: number = endDateMS - startDateMS;

if (resFlag == "d") {

difValue = Math.floor(tottleDiffMS / (24 * 3600 * 1000));

}
else if (resFlag == "h") {

difValue = Math.floor(tottleDiffMS / (3600 * 1000));

}
else if (resFlag == "m") {

difValue = Math.floor(tottleDiffMS / (60 * 1000));

}
else if (resFlag == "s") {

difValue = Math.floor(tottleDiffMS / (1000));

}
else if (resFlag == "ms") {

difValue = tottleDiffMS;

}

return difValue;

}

}

//Public structure definition

//request parameters encapsulation
export class RequestParams {
public GetDataUrl: string = "";
public Reqtype: string = "";
public Reqmethod: string = "";
public ReqdataType: string = "";
public Reqdata: string = "";
public Reqi18n: string = "";
public ServIdentifer: string = "";
public ServVersionIden: string = "";
//AddrType 参数值为nodecenter(节点中心地址)、biznode(业务节点地址)、terminal(终端网页地址)
public AddrType: string = "";
}

//response parameters encapsulation
export class ResponseParams {
public respflag: string = "";
public resptoolstr: string = "";
public respdata: string = "";
public pagertottlecounts: string = "";
}

//request parameters encapsulation webapi
export class Reqobj {
public dataUrl:string = "";
public reqtype: string = "";
public reqmethod: string = "";
public reqdatatype: string = "";
public sn: string = "";
public output: string = "";
public reqiden: string = "";
public reqdataiden: string = "";
public reqdatas: string = "";
public reqi18n: string = "";
public reqversion: string = "";

constructor(_dataUrl:string, _reqtype:string, _reqmethod:string, _reqdatatype:string,
_sn: string, _output: string, _reqdataiden: string, _reqdatas: string, _reqi18n: string,
_reqiden: string, _reqversion: string) {
this.dataUrl = _dataUrl;
this.reqtype = _reqtype;
this.reqmethod = _reqmethod;
this.reqdatatype = _reqdatatype;
this.sn = _sn;
this.output = _output;
this.reqdataiden = _reqdataiden;
this.reqdatas = _reqdatas;
this.reqi18n = _reqi18n; 
this.reqiden = _reqiden;
this.reqversion = _reqversion;
}
}
export class Reqdata {
public key: string = "";
public value: string = "";
}
export class response {
public status: string = "";
public datetime: string = "";
public respdatas: string = "";
public tottlerecords: string = "";
public resperrordatas: string = "";
}

//检查数据库参数
export class CheckBizObjectRepatParams {
public Bizobjectname: string = "";
public WherePropertyL: any[] = [];
public Splitchar: string = "";
}

2、监控超时

//超时处理函数，直接退出系统路由到退出提示组件

timeOutFunction(): void {

let nodecenterobj: any = JSON.parse(this.commonmodule.getNodeCenterAddr());

let currDate: Date = new Date(); //当前时间

let difvalue: number = this.commonmodule.dateTimeSeg(this.commonmodule.sessionMgt_onlineTime("", "R"), currDate.toJSON(), "m");

let tiemoutValue: number = parseInt(nodecenterobj.timeOutMinutes);

if (difvalue > tiemoutValue) {

if (this.quitFlag != "TimeOut") {

this.quitFlag = "TimeOut";

this.router.navigateByUrl("quitsystem"); 
}

}

}

3、调用样例

服务样例：

import { Injectable } from '@angular/core';
import { CommonRootService, MainValueName, PagingParam, RequestParams, ResponseParams } from '../common_module/common.service';

@Injectable()
export class SysmanagerService {
constructor(private commonmodule: CommonRootService) { }

//获取用户组名
getGroupName(reqdata: RequestParams, resdataFunc: any, displayresdataFunc: any, errorFunc: any): void {

this.commonmodule.getHttpInfoDataAuth(reqdata, resdataFunc, displayresdataFunc, errorFunc);

}

}//class end

调用样例：

//查询数据
querydata(): void {
this.getData(1);
}

getData(currpageindex: number): void {
this.condiv = true;

//this.pagingParam.PageSize = 5; //默认10
this.pagingParam.PageIndex = currpageindex;

let currqueryobj: any = {};
currqueryobj.GROUPID = this.groupname;
currqueryobj.ISUSE = this.isuse;

let groupreqobj = [{ queryItemKey: "SSY_PagingParam", queryItemValue: JSON.stringify(this.pagingParam) },
{ queryItemKey: "SSY_GROUP_DICT", queryItemValue: JSON.stringify(currqueryobj) }];

let reqdata: RequestParams = new RequestParams();
reqdata.AddrType = "FrameMgt";
reqdata.GetDataUrl = "/FrameApi/GetGroupPagerN";
reqdata.Reqmethod = "post";
reqdata.Reqdata = JSON.stringify(groupreqobj);
reqdata.ReqdataType = "";
reqdata.Reqtype = "getgroupdata";
reqdata.Reqi18n = this.commonmodule.getI18nlang();
reqdata.ServIdentifer = "frameManager";
reqdata.ServVersionIden = "1.0";

this.sysmanagerServ.getGroups(reqdata,
res => this.getDataResdataFunc(res), res => this.getDataDisplaydataFunc(res), err => this.getDataErrorFunc(err));
}

getDataResdataFunc(data: any): any {
return data;
}
getDataDisplaydataFunc(data: any): void {
this.condiv = false;
this.bindcurrdata = [];
this.tottlecounts = 0;
this.currdata = [];
this.olddata = [];
if (data.status == 200) {
let respdata: ResponseParams = JSON.parse(JSON.parse(data._body));
if (respdata.respflag == "1") {
let binddata: any = [];
binddata = JSON.parse(respdata.respdata);
for (var i = 0; i < binddata.length; i++) {
if (binddata[i]["ISUSE"] == "1") {
binddata[i]["ISUSE"] = true;
}
else {
binddata[i]["ISUSE"] = false;
}
}
this.currdata = this.commonmodule.copyArrayToNewArray(binddata);
this.olddata = this.commonmodule.copyArrayToNewArray(binddata);
this.tottlecounts = +respdata.pagertottlecounts;

this.bindcurrdata = [];
this.bindcurrdata = this.commonmodule.copyArrayToNewArray(binddata);
}
else {
this.errorinfos = [];
this.errorinfos.push({ severity: 'warn', summary: this.commonlang.noticeInfoTitle, detail: this.commonlang.noticeNoFoundData });
}
}
else {
this.errorinfos = [];
this.errorinfos.push({ severity: 'warn', summary: this.commonlang.noticeInfoTitle, detail: this.commonlang.noticeError });
}
}
getDataErrorFunc(err: string) {
this.errorinfos = [];
this.errorinfos.push({ severity: 'warn', summary: this.commonlang.noticeInfoTitle, detail: this.commonlang.noticeHttpError_info + err });
this.condiv = false;
}

获取实例源码请入QQ群706224870，在群文件中下载。