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

1.问题出现的场景与解决

实现一个登录拦截器，重写doFilter方法，判断用户的登录状态，在用户长时间未操作或者异地登录时前端进行提示，完整代码如下

 public class LoginValidateFilter implements Filter {

     private String errorMessage;
     private Logger log = LoggerFactory.getLogger(this.getClass());

     @Override
     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse,
                          FilterChain chain) throws IOException, ServletException {
         try {
             HttpServletRequest request = (HttpServletRequest) servletRequest;
             HttpServletResponse response = (HttpServletResponse) servletResponse;

             String url = request.getRequestURI();
             if (isResourceRequest(url)
                     || isNotLoginValidate(url, request)) {
                 chain.doFilter(servletRequest, servletResponse);
                 return;
             }
             //判断用户是否在登录状态
             if (isLogin(request, response)) {
                 //更新session时间：心跳检测的请求不更新
                 if (url.indexOf("/manage/session/isAlive.do") < 0) {
                     SessionUtil.updateSession(request);
                 }
                 chain.doFilter(servletRequest, servletResponse);
             } else {
                 SessionUtil.removeSession(request);
                 String path = request.getContextPath();
                 response.setContentType("text/html");
 //                String responsePage = "<script>document.location.href='" + path + "/login.jsp" + (StringUtil.isEmpty(errorMessage)
 //                        ? "'" : "?errorMessage='+encodeURIComponent ('" + errorMessage + "')") + "</script>";

                 String responsePage = "<script>document.location.href='" + path + "/login.jsp" + "';window.sessionStorage.setItem('errorMessage','"+errorMessage+"');"+ "</script>";
                 response.getWriter().print(responsePage);
             }
         } catch (Exception e) {
             log.error("登录过滤器异常:{}", e);
             throw new ServletException(e);
         }
     }

     private boolean isLogin(HttpServletRequest request, HttpServletResponse response) {
         Session session = SessionUtil.getSession(request);
         //未登录
         if (session == null) {
             errorMessage = "";
             Session oldSession = SessionUtil.getOldSession(request);
             if (oldSession != null) {
                 errorMessage = "您的账号在异地登录(" + oldSession.getIp() + ")，如非授权，建议修改密码";
             }
             return false;
         }
         //登录超时
         if (SessionUtil.isLoginTimeout(session)) {
             SessionUtil.removeSession(session);
             errorMessage = "因长时间未操作，系统已自动退出，请重新登录";
             return false;
         }
         return true;
     }

     /**
      * 不用过滤的额外配置
      * 没有登录时，有些请求是必须的，因此不用过滤
      *
      * @param url
      * @param request
      * @return
      */
     private boolean isNotLoginValidate(String url, HttpServletRequest request) {
         for (String path : GridProperties.NOT_VALIDATE_PATH) {
             if (url.startsWith(request.getContextPath() + path)) {
                 return true;
             }
         }
         return false;
     }

     /**
      * 资源请求
      *
      * @param url
      * @return
      */
     private boolean isResourceRequest(String url) {
         if (url.endsWith(".jpg") || url.endsWith(".gif")
                 || url.endsWith(".css") || url.endsWith(".js")
                 || url.endsWith(".png") || url.endsWith(".bmp")
                 || url.endsWith(".ico") || url.endsWith(".txt")
                 || url.endsWith(".apk") || url.endsWith("bootstrap.min.css.map")) {
             return true;
         }
         return false;
     }

     @Override
     public void destroy() {
         this.errorMessage = "";
     }

     @Override
     public void init(FilterConfig filterConfig) throws ServletException {
         this.errorMessage = "";
     }

 }

第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://www.cnblogs.com/polk6/p/5512979.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage

https://www.cnblogs.com/minigrasshopper/p/8064367.html

sessionStorage   详细X

网络释义

sessionStorage: 会话存储

window  ['wɪndəʊ]  window&type=1详细X

基本翻译

n. 窗；窗口；窗户

网络释义

window: 窗

Window function: 窗函数

show window: 橱窗