资讯专栏INFORMATION COLUMN

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

番茄西红柿 / 3174人阅读

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 = "";
 32 
 33                 String responsePage = "";
 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   详细X 网络释义 sessionStorage: 会话存储 window  [wɪndəʊ]  window&type=1详细X 基本翻译 n. 窗;窗口;窗户 网络释义 window: 窗 Window function: 窗函数 show window: 橱窗

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1423.html

相关文章

  • 刷新页面vuex数据不消失和不跳转页面

    摘要:先说点什么和路由拦截这一块捣鼓的有一段时间了总算是爬出来了特地来分享一下首先声明没有什么基础介绍用的是登录状态存储的方法进入正题刷新刷新相当与重启项目,之前获取到的数据也只是通过暂存起来,项目关闭时就不见了,这有些像电脑重启,存储在的数据会 先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储session...

    tracymac7 评论0 收藏0
  • 前端能做到彻底权限控制吗?

    摘要:有一天突然想到一个问题,端的权限控制真的能控制权限吗仅仅靠前端,能不能做到真正的权限控制如果需要后台配合,应该如何配合可能这是一个老生常谈的问题,但还是想整理下,有误的地方望大家指出。 有一天突然想到一个问题,web端的权限控制:1.真的能控制权限吗?2.仅仅靠前端,能不能做到真正的权限控制?3.如果需要后台配合,应该如何配合?可能这是一个老生常谈的问题,但还是想整理下,有误的地方望大...

    luck 评论0 收藏0
  • 前后端分离——token超时刷新策略

    摘要:实现目标延长过期时间活跃用户在过期时,在用户无感知的情况下动态刷新,做到一直在线状态不活跃用户在过期时,直接定向到登录页登录返回字段如何签发,请看上一篇推文,这里不做过多介绍。如果你有更好的做法,欢迎留言告知我,谢谢啦。 前言 记录一下前后端分离下————token超时刷新策略! 需求场景 昨天发了一篇记录 前后端分离应用——用户信息传递 中介绍了token认证机制,跟几位群友讨论了...

    hatlonely 评论0 收藏0
  • Vue中验证登录状态

    摘要:用存储用户路由守卫路由中设置的字段就在当中每次跳转的路径登录状态下访问页面会跳到如果没有访问任何页面。一个简单的保存登录状态的小。 Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首...

    draveness 评论0 收藏0
  • 「Vue实践」武装你前端项目

    摘要:所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中,需要用实例的方法清除可当你有多个时,就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积,传输速度更快。本文目录 接口模块处理 Vue组件动态注册 页面性能调试:Hiper Vue高阶组件封装 性能优化:eventBus封装 webpack插件:真香 本文项目基于Vue-Cli3,想知...

    曹金海 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<