欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

sessionStorage记录返回前端的数据,用于解决登录拦截器刷新页面的问题

程序员文章站 2022-06-21 12:49:22
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 我们可以看到如下界面

sessionStorage记录返回前端的数据,用于解决登录拦截器刷新页面的问题

可以看到我们可以使用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: 会话存储
window  ['wɪndəʊ]  window&type=1x
基本翻译
n. 窗;窗口;窗户
网络释义
window function: 窗函数
橱窗