angular访问后台服务及监控会话超时的封装实现
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;
}