本章目錄：
- 問題描述
- AJAX請求后端直接重定向失敗
- 解決方案
- 后端攔截請為響應(yīng)頭添加重定向標志
- 后端攔截器為響應(yīng)頭添加重定向路徑
- 前端響應(yīng)攔截器獲取響應(yīng)頭數(shù)據(jù)，并通過location.href = url 完成頁面跳轉(zhuǎn)
一、問題描述
本來想在攔截器里設(shè)置未登錄用戶訪問指定接口時，跳轉(zhuǎn)到登錄頁面。
結(jié)果發(fā)現(xiàn)前端請求到的res如下圖所示，只返回了登錄頁的樣式，并沒有完成瀏覽跳轉(zhuǎn)
??
通過查閱資料了解：ajax是一種異步http請求方式，它可以在不刷新頁面的情況下向后臺發(fā)送請求并獲取響應(yīng)數(shù)據(jù)，但是它不能自動進行頁面重定向。
二、解決方案?
修改攔截器邏輯，未登錄用戶不直接重定向登錄頁面。
當(dāng)未登錄用戶訪問指定接口時，在響應(yīng)頭里添加“我要重定向”的標志并且添加重定向后的地址返回給前端，前端請求接口后，搜尋到"我要重定向"標志后，拿著對應(yīng)的地址去完成頁面跳轉(zhuǎn)即可。
攔截器代碼：
前端請求后的獲取的響應(yīng)頭：
?
在axios的響應(yīng)攔截器內(nèi)判斷響應(yīng)頭：
axios.interceptors.response.use(function (response) {
// 判斷響應(yīng)頭內(nèi)是否有重定向標志
if(response.headers.redirect == null){
return response.data
} else {
//響應(yīng)頭內(nèi)的重定向地址
location.href = response.headers.redirecturl
}
if (!response.data.success) {
return Promise.reject(response.data.errorMsg)
}
return response.data;
}
?如此，通過前端的location.href即可完成頁面的重定向
總結(jié)：?
- 后端攔截請為響應(yīng)頭添加重定向標志
- 后端攔截器為響應(yīng)頭添加重定向路徑
- 前端響應(yīng)攔截器獲取響應(yīng)頭數(shù)據(jù)，并通過location.href = url 完成頁面跳轉(zhuǎn)
?文章來源地址http://www.zghlxwxcb.cn/news/detail-609514.html
?文章來源：http://www.zghlxwxcb.cn/news/detail-609514.html
?
到了這里，關(guān)于解決后端無法對前端的ajax請求重定向的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
