webix+springmvc session超时跳转登录页面


Posted in Javascript onOctober 30, 2016

引言

最近做项目,发现ajax请求不能在服务器中直接重定向到登录页面。查了些资料发现jquery的ajax请求有人给出了方法。但是webix的ajax请求和jquery的有些区别。这里模仿jquery的处理方式实现webix的ajax请求session超时跳转。

具体的做法:

1、查看webix.js源码发现webix.ajax只有请求前的监听函数 "onBeforeAjax", 要做到获取返回状态跳转登录页面必须要有个返回的监听函数,但是源码没有。所以我修改了下源码,加了个返回的监听函数"onAfterAjax"。

红色标记部分是我加的代码,当检测到ajax完成时,自动执行"onAfterAjax"。(代码的位置可以搜索webix.js ,条件"onBeforeAjax",然后在对应的位置加入红色代码就行

if (webix.callEvent("onBeforeAjax", [s, t, e, a, o, null, r])) {
var h = !1;
if ("GET" !== s) {
var l = !1;
for (var c in o)"content-type" == c.toString().toLowerCase() && (l = !0, "application/json" == o[c] && (h = !0));
l || (o["Content-Type"] = "application/x-www-form-urlencoded")
}
if ("object" == typeof e)if (h)e = this.stringify(e); else {
var u = [];
for (var d in e) {
var f = e[d];
(null === f || f === webix.undefined) && (f = ""), "object" == typeof f && (f = this.stringify(f)), u.push(d + "=" + encodeURIComponent(f))
}
e = u.join("&")
}
e && "GET" === s && (t = t + (-1 != t.indexOf("?") ? "&" : "?") + e,
e = null), a.open(s, t, !this.H);
var b = this.Tw;
b && (a.responseType = b);
for (var c in o)a.setRequestHeader(c, o[c]);
var x = this;
return this.master = this.master || n, a.onreadystatechange = function () {
if (!a.readyState || 4 == a.readyState) {
if (webix.callEvent("onAfterAjax", [a]) === !1) {
return false;
};
if (webix.ajax.count++, i && x && !a.aborted) {
if (-1 != webix.ly.find(a))return webix.ly.remove(a);
var t, e, s = x.master || x, r = a.status >= 400 || 0 === a.status;
"blob" == a.responseType || "arraybuffer" == a.responseType ? (t = "", e = a.response) : (t = a.responseText || "", e = x.J(a)), webix.ajax.$callback(s, i, t, e, a, r)
}
x && (x.master = null), i = x = n = null
}
}, this.qh && (a.timeout = this.qh), this.H ? a.send(e || null) : setTimeout(function () {
a.aborted || (-1 != webix.ly.find(a) ? webix.ly.remove(a) : a.send(e || null));
}, 1), this.master && this.master.Ve && this.master.Ve.push(a), this.H ? a : r
}

2、webix.ajx请求没有明显的标志,jquery.ajax的标识是x-requested-with ,所以我模拟给了个标识requestFlag="webix"(可以自己设置个喜欢的),用"onBeforeAjax"设置

webix.attachEvent("onBeforeAjax",function(s, t, e, a, o){o["requestFlag"]="webix"})

3、监听返回状态

webix.attachEvent("onAfterAjax",function(xhr){if(xhr.getResponseHeader("sessionstatus")=='timeout'){window.location.href='/webix/login.html'}});

4、后台代码

4.1 拦截器代码

package com.ljx.filter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
public class UserInterceptor implements HandlerInterceptor {
@Override
public void afterCompletion(HttpServletRequest arg0,
HttpServletResponse arg1, Object arg2, Exception arg3)
throws Exception {
}
@Override
public void postHandle(HttpServletRequest arg0,
HttpServletResponse response, Object arg2, ModelAndView arg3)
throws Exception {
response.sendRedirect("/webix/login.html");
}
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response, Object handler) throws Exception {
Object obj = request.getSession().getAttribute("LOGIN");
if (null == obj) { // 未登录
if (request.getHeader("requestFlag") != null
&& request.getHeader("requestFlag").equalsIgnoreCase(
"webix")) { // 如果是ajax请求响应头会有,requestFlag
response.setHeader("sessionstatus", "timeout");// 在响应头设置session状态
} else {
response.sendRedirect(request.getContextPath() + "/login");
}
return false;
}
return true;
}
}

4.2 spring配置文件加入拦截器配置

<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/mvc/*" />
<bean class="com.ljx.filter.UserInterceptor"></bean>
</mvc:interceptor>
</mvc:interceptors>

4.3 在F12控制台执行下webix.ajax查看效果

webix.ajax().get("/webix/mvc/login.action")

以上所述是小编给大家介绍的webix+springmvc session超时跳转登录页面,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的。

Javascript 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
js获取时间函数及扩展函数的方法
Oct 30 #Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 #Javascript
浅谈JS函数定义方式的区别
Oct 30 #Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 #Javascript
原生js代码实现图片放大境效果
Oct 30 #Javascript
Angular2 多级注入器详解及实例
Oct 30 #Javascript
Javascript 跨域知识详细介绍
Oct 30 #Javascript
You might like
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php查询ip所在地的方法
2014/12/05 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
javascript Keycode对照表
2009/10/24 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python中p-value的实现方式
2019/12/16 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
2014年党员公开承诺践诺书
2014/03/25 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
后进生评语大全
2015/01/04 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技