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 我們可以看到如下界面
可以看到我們可以使用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: 櫥窗