Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 486|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-7-13 09:56:35 | 显示全部楼层 |阅读模式

    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://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: 会话存储
    window   ['wɪndəʊ]   window&type=1 详细 X
    基本翻译
    n. 窗;窗口;窗户
    网络释义
    window:
    Window function: 窗函数
    show window: 橱窗
    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-12-22 22:16 , Processed in 0.060087 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表