前言
今天發(fā)現(xiàn)，當使用Ajax請求時，如果后臺進行重定向到其他頁面時是無法成功的，只能在瀏覽器地址欄輸入才能夠?qū)崿F(xiàn)重定向。
Ajax默認就是不支持重定向的，它是局部刷新，不重新加載頁面。
需要實現(xiàn)的功能是，后臺網(wǎng)關(guān)攔截請求，看請求中是否存在token.如果不存在就跳轉(zhuǎn)到登錄頁面。因為大多數(shù)請求都是使用Ajax.一開始發(fā)現(xiàn)無法進行重定向，每次都是返回到Ajax的結(jié)果處理函數(shù)。最終的解決辦法如下，需要后臺和前端進行處理。
后臺：
/***功能描述* @author lgj* @Description 重定向工具類* @date 2/27/19*/@Slf4jpublic class RedirecUtil {/***功能描述* @author lgj* @Description 重定向* @date 2/27/19* @param:* @return:**/public static void redirect(RequestContext ctx, String redirectUrl){try{//如果是Ajax請求if("XMLHttpRequest".equals(ctx.getRequest().getHeader("X-Requested-With"))){log.debug("ajax redirect");sendRedirect(ctx.getResponse(),redirectUrl);}//如果是瀏覽器地址欄請求else {log.debug("normal redirect ");ctx.getResponse().sendRedirect(redirectUrl);}}catch(Exception ex){ex.printStackTrace();}}/***功能描述 * @author lgj* @Description Ajax請求時重定向處理* @date 2/27/19* @param: * @return: **/private static void sendRedirect(HttpServletResponse response, String redirectUrl){try { //這里并不是設(shè)置跳轉(zhuǎn)頁面，而是將重定向的地址發(fā)給前端，讓前端執(zhí)行重定向//設(shè)置跳轉(zhuǎn)地址response.setHeader("redirectUrl", redirectUrl);//設(shè)置跳轉(zhuǎn)使能response.setHeader("enableRedirect","true");response.flushBuffer();} catch (IOException ex) {log.error("Could not redirect to: " + redirectUrl, ex);}}}前端處理
第一種方式：使用Ajax的complete方法
$.ajax({type: "post",url: "/auth/token/check",success: function(data,status){console.log("/token/check 返回 status : "+status)},//請求完成調(diào)用(XHR, TS){console.log("complete");var url = XHR.getResponseHeader("redirectUrl");console.log("redirectUrl = " + url);var enable = XHR.getResponseHeader("enaleRedirect");console.log("enableRedirect = " + enable);if((enable == "true") && (url != "")){ var win = window; while(win != win.top){ win = win.top; } win.location.href = url; } }, });})但是上面有個問題就是，每個ajax都需要編寫 comlete 方法，代碼復(fù)用率低。
第二種方法 ： 使用全局的complete方法
ajax請求
$("#NON-TOKEN").click(function () {$.ajax({type: "post",url: "/auth/token/check",success: function(data,status){console.log("/token/check 返回 status : "+status)},});全局處理
注意這參數(shù)(event, xhr, settings)不能少，否則會報錯。
//每一個Ajax 請求完成之后都會執(zhí)行。$(document).ajaxComplete(function (event, xhr, settings) {console.log("ajaxComplete ")redirectHandle(xhr);})function redirectHandle(xhr) { //獲取后臺返回的參數(shù)var url = xhr.getResponseHeader("redirectUrl");console.log("redirectUrl = " + url);var enable = xhr.getResponseHeader("enableRedirect");if((enable == "true") && (url != "")){var win = window;while(win != win.top){win = win.top;}win.location.href = url;}}也可以將上述前端代碼放入一個js文件中，在需要進行重定向的時候引入即可，便可以實現(xiàn)更高的代碼復(fù)用率。
redirect.js
function redirectHandle(xhr) {var url = xhr.getResponseHeader("redirectUrl");console.log("redirectUrl = " + url);var enable = xhr.getResponseHeader("enableRedirect");if((enable == "true") && (url != "")){var win = window;while(win != win.top){win = win.top;}win.location.href = url;}}$(function () {$(document).ajaxComplete(function (event, xhr, settings) {console.log("ajaxComplete adffdafadsaf")redirectHandle(xhr);})})引入js文件，src根據(jù)據(jù)實際情況設(shè)置。
<script src="/common/redirect.js"></script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
