Spring Boot Ext JS准前后端框架应用的会话（Session）处理| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

Spring Boot Ext JS准前后端框架应用的会话（Session）处理

## Spring Boot+Ext JS准前后端框架应用的会话（Session）处理
### 准前后端分离的Session机制
Spring Boot + Ext JS的准前后端分离架构，Cmd 使用JSP作为模板文件进行Build， 通过JSP 的Session对象进行前后端连接的控制。
JSP 的Session机制大致是，在浏览器访问服务端的时候，服务端对针对此客户端创建一个Session对象，此Session对象中可以存储前端验证通过的用户相关信息，服务器将Session的ID发送个浏览器，浏览器保存该ID，在每次访问服务端的时候都会带上此ID。有几种状况，该Session会失效：
服务端原因：超过后端设置的Session超时时间设置，浏览器端再使用该Session ID就会认为是无效。 Session的超时设置可以在应用服务器或是应用的配置文件中进行设置。
客户端原因： 在浏览器端清除了该Session ID，再此访问时从服务端获取的就是一个新的Session 对象的ID，这个Session对象没有用户相关信息，除非重新登录。
### Session失效的场景
需要和服务端交互才能知道是否超时，如果仅仅是前端视图的切换，不调用后端服务，则无法感知Session已经失效。所以在典型的Ext JS应用中，会出现Session失效的场景有：
网格的数据的更新：Grid中的Store的更新，Store的load()方法被调用。
按钮的点击操作。一般而言，点击某个按钮，会通过Ajax调用后端的服务。
View Model模式的数据更新
### Session失效的解决
Session失效的典型处理就是弹出用户名/密码输入框，调用后端异步登录方法登录。
后端处理
但后端Session失效时，后端无法通过前端的Session ID从对应的Session对象中获取用户信息， 后端统一抛出Session超时的返回即可，比如以下返回。
```javascript
{  success:false, code:401, msg:'Session Time out'}
```
HTTP的401 代表是用户对某资源没有访问权限，可以借用这个返回码定义应用的Session和认证相关的错误，也可以新增加一码，比如：
4010 代表没有登录
4011 用户名密码错误
4012 Session超时
### 前端处理
针对Grid的更新和Ajax的请求时Session的失效状况：
Grid中数据的更新，其实是对应Store的重新加载，在定义该Store时，可以通过该Store的Proxy进行设置，添加Proxy的exception的事件的处理，在该事件对应的函数中，如果返回的是Session Timeout的返回， 则弹出用户名/密码输入框进行输入。
Ajax呼叫则通过返回的响应判读是否是Session Timeout的返回，如是则弹出用户名/密码输入框进行输入。
ViewModel的处理和Ajax类似， 同样是判断返回。
### 是否回调
重新输入用户名/密码之后，有的操作需要登录后自动调用之前未成功执行的，需要自动执行，比如Grid的更新；有的操作则提示用户重新点击执行，比如点击按钮的操作。
因为Store和Ajax都是异步呼叫，所以某一时刻可能有多个操作触发了重新登录，而登录框只能是最早触发的那个弹出，后面的不需要弹出多个用户/密码输入框。比如：Session超时时同时触发了三个动作，则第一个侦测的动作弹出对话框，后面两个不需要弹出， 但是，但是，这个两个操作可能需要回调。所以，需要回调的部分需要放入一个队列中，当成功登录后，这个队列中需要回调的方法依次执行。
### 主要代码示例片段
Store的处理
getProxyCfg:function(url,store,method,contentType,paramsAsJson){
var proxyCfg = {
type : 'ajax',
url : url,
actionMethods:{
read : method!=null?method:'GET'
},
reader: {
type: 'json',
rootProperty: 'datas'
},listeners:{
exception:function(
thisProxy, response, operation, eOpts ){
var obj = Ext.decode(response.responseText);
if(obj.code!=null&&obj.code.length>3&&obj.code.substr(0,3)=="401"){
if(store.lastOptions!=null&&store.lastOptions.callback!=null&&typeof(store.lastOptions.callback)=='function')
{
var callbackFunc = store.lastOptions.callback;
Ext.getApplication().getController("main").login(obj.msg,function(){store.load(callbackFunc)});
}else{
Ext.getApplication().getController("main").login(obj.msg,function(){store.load()});            
}           
}           
}            
}
};

Ajax呼叫共用方法
```javascript
callServiceWithSesChkAndResp:function(url, method, paramObj, callbackFunc, isJsonParam,moreParamObj,iCount){
var me = this;		if(iCount==null) iCount = 1;
var requestCfg = {
url : url,
method : method,
// params : paramObj,
success : function(response, opts) {
if(me.isSessionInvalidResponse(response)){
var obj = Ext.decode(response.responseText);
Ext.getApplication().getController("main").login(obj.msg,function(){
me.callServiceWithSesChkAndResp(url, method, paramObj, callbackFunc, isJsonParam,moreParamObj,iCount++);
});
}else{
if (obj != null && obj.success != null && obj.success == false) {
Ext.Msg.alert('Fail', obj.msg);
}else{
if (callbackFunc != null && typeof (callbackFunc) === "function") {
callbackFunc(response);
}
}
}
},
failure : function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
};
if (paramObj != null) {
if (isJsonParam != null && isJsonParam === true) {
requestCfg.jsonData = paramObj;
} else {
requestCfg.params = paramObj;
}
}
Ext.Ajax.request(requestCfg);
}
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

Spring Boot Ext JS准前后端框架应用的会话（Session）处理

网站导航