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

时间:2023-03-08 20:11:49
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 我们可以看到如下界面

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

可以看到我们可以使用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: 橱窗