sessionStorage记录返回前端的数据,用于解决登录拦截器刷新页面的问题
程序员文章站
2022-04-13 12:38:06
1.问题出现的场景与解决 实现一个登录拦截器,重写doFilter方法,判断用户的登录状态,在用户长时间未操作或者异地登录时前端进行提示,完整代码如下 第30-31行返回给前端返回提示信息,通过url进行传参进行提示,前端页面再进行获取,往往会出现乱码和刷新页面数据还在的问题, 考虑通过后端方式给前 ......
1.问题出现的场景与解决
实现一个登录拦截器,重写dofilter方法,判断用户的登录状态,在用户长时间未操作或者异地登录时前端进行提示,完整代码如下
1 public class loginvalidatefilter implements filter { 2 3 private string errormessage; 4 private logger log = loggerfactory.getlogger(this.getclass()); 5 6 @override 7 public void dofilter(servletrequest servletrequest, servletresponse servletresponse, 8 filterchain chain) throws ioexception, servletexception { 9 try { 10 httpservletrequest request = (httpservletrequest) servletrequest; 11 httpservletresponse response = (httpservletresponse) servletresponse; 12 13 string url = request.getrequesturi(); 14 if (isresourcerequest(url) 15 || isnotloginvalidate(url, request)) { 16 chain.dofilter(servletrequest, servletresponse); 17 return; 18 } 19 //判断用户是否在登录状态 20 if (islogin(request, response)) { 21 //更新session时间:心跳检测的请求不更新 22 if (url.indexof("/manage/session/isalive.do") < 0) { 23 sessionutil.updatesession(request); 24 } 25 chain.dofilter(servletrequest, servletresponse); 26 } else { 27 sessionutil.removesession(request); 28 string path = request.getcontextpath(); 29 response.setcontenttype("text/html"); 30 // string responsepage = "<script>document.location.href='" + path + "/login.jsp" + (stringutil.isempty(errormessage) 31 // ? "'" : "?errormessage='+encodeuricomponent ('" + errormessage + "')") + "</script>"; 32 33 string responsepage = "<script>document.location.href='" + path + "/login.jsp" + "';window.sessionstorage.setitem('errormessage','"+errormessage+"');"+ "</script>"; 34 response.getwriter().print(responsepage); 35 } 36 } catch (exception e) { 37 log.error("登录过滤器异常:{}", e); 38 throw new servletexception(e); 39 } 40 } 41 42 private boolean islogin(httpservletrequest request, httpservletresponse response) { 43 session session = sessionutil.getsession(request); 44 //未登录 45 if (session == null) { 46 errormessage = ""; 47 session oldsession = sessionutil.getoldsession(request); 48 if (oldsession != null) { 49 errormessage = "您的账号在异地登录(" + oldsession.getip() + "),如非授权,建议修改密码"; 50 } 51 return false; 52 } 53 //登录超时 54 if (sessionutil.islogintimeout(session)) { 55 sessionutil.removesession(session); 56 errormessage = "因长时间未操作,系统已自动退出,请重新登录"; 57 return false; 58 } 59 return true; 60 } 61 62 /** 63 * 不用过滤的额外配置 64 * 没有登录时,有些请求是必须的,因此不用过滤 65 * 66 * @param url 67 * @param request 68 * @return 69 */ 70 private boolean isnotloginvalidate(string url, httpservletrequest request) { 71 for (string path : gridproperties.not_validate_path) { 72 if (url.startswith(request.getcontextpath() + path)) { 73 return true; 74 } 75 } 76 return false; 77 } 78 79 /** 80 * 资源请求 81 * 82 * @param url 83 * @return 84 */ 85 private boolean isresourcerequest(string url) { 86 if (url.endswith(".jpg") || url.endswith(".gif") 87 || url.endswith(".css") || url.endswith(".js") 88 || url.endswith(".png") || url.endswith(".bmp") 89 || url.endswith(".ico") || url.endswith(".txt") 90 || url.endswith(".apk") || url.endswith("bootstrap.min.css.map")) { 91 return true; 92 } 93 return false; 94 } 95 96 @override 97 public void destroy() { 98 this.errormessage = ""; 99 } 100 101 @override 102 public void init(filterconfig filterconfig) throws servletexception { 103 this.errormessage = ""; 104 } 105 106 }
第30-31行返回给前端返回提示信息,通过url进行传参进行提示,前端页面再进行获取,往往会出现乱码和刷新页面数据还在的问题,
考虑通过后端方式给前端传回数据 都没有成功。
最后通过使用sessionstorage进行传递参数,问题解决。
前端的主要处理代码如下
console.log(window.sessionstorage.getitem('errormessage')); var message = window.sessionstorage.getitem('errormessage'); if (message !=null) { $(".login-errormsg").text(message); window.sessionstorage.removeitem("errormessage"); }else { $(".login-errormsg").text(""); }
2.认识sessionstorage
通过浏览器的f12 我们可以看到如下界面
可以看到我们可以使用localstorage 和sessionstorage来存储前端交互数据
sessionstorage简单的存取和读取方式如下:
sessionstorage.setitem('testkey','这是一个测试的value值'); // 存入一个值
window.sessionstorage.getitem('key'); //取出一个值
sessionstorage.removeitem("key");//删除某个key
sessionstorage.clear();//清除所有key/value
可以大胆推断一下,localstorage 的使用方式应该也是类似的,
具体的使用方法可以参考:
https://developer.mozilla.org/zh-cn/docs/web/api/window/sessionstorage
网络释义
sessionstorage: 会话存储
基本翻译
n. 窗;窗口;窗户