vue+springboot前后端分離實現(xiàn)單點登錄跨域問題解決方法
最近在做一個后臺管理系統(tǒng)，前端是用時下火熱的vue.js，后臺是基于springboot的。因為后臺系統(tǒng)沒有登錄功能，但是公司要求統(tǒng)一登錄，登錄認證統(tǒng)一使用.net項目組的認證系統(tǒng)。那就意味著做單點登錄咯，至于不知道什么是單點登錄的同學，建議去找一下萬能的度娘。
剛接到這個需求的時候，老夫心里便不屑的認為：區(qū)區(qū)登錄何足掛齒，但是，開發(fā)的過程狠狠的打了我一巴掌（火辣辣的一巴掌）。。。，所以這次必須得好好記錄一下這次教訓，以免以后再踩這樣的坑。
我面臨的第一個問題是跨域，瀏覽器控制臺直接報CORS,以我多年開發(fā)經驗，我果斷在后臺配置了跨域配置，代碼如下：
@Configuration
public class CorsConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("*")
.allowedMethods("*")
.allowedOrigins("*");
}
};
}
}
這個配置就是允許所有mapping，所有請求頭，所有請求方法，所有源。改好配置之后我果斷重啟項目，看效果，結果發(fā)現(xiàn)根本沒法重定向跳轉到單點登錄頁面，看瀏覽器報錯是跨域導致的，我先上我登錄攔截器的代碼
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
//用戶已經登錄
if (request.getSession().getAttribute("user") != null) {
return true;
}
//從單點登錄返回之后的狀態(tài)，本系統(tǒng)還不處于登錄狀態(tài)
//根據(jù)code值去獲取access_token，然后再根據(jù)access_token去獲取用戶信息，并將用戶信息存到session中
String state = request.getParameter("state");
String uri = getUri(request);
if (isLoginFromSSO(state)) {
String code = request.getParameter("code");
Object cacheUrl = request.getSession().getAttribute(state);
if (cacheUrl == null) {
response.sendRedirect(uri);
return false;
}
HttpUtil client = new HttpUtil();
StringBuffer sb = new StringBuffer();
sb.append("code=").append(code)
.append("&grant_type=").append("authorization_code")
.append("&client_id=").append(SSOAuth.ClientID)
.append("&client_secret=").append(SSOAuth.ClientSecret)
.append("&redirect_uri=").append(URLEncoder.encode((String) cacheUrl));
String resp = client.post(SSOAuth.AccessTokenUrl, sb.toString());
Map<String, String> map = new Gson().fromJson(resp, Map.class);
//根據(jù)access_token去獲取用戶信息
String accessToken = map.get("access_token");
HttpUtil http = new HttpUtil();
http.addHeader("Authorization", "Bearer " + accessToken);
String encrypt = http.get(SSOAuth.UserUrl);
String userinfo = decryptUserInfo(encrypt);
//封裝成user對象
User user = new Gson().fromJson(userinfo, User.class);
request.getSession().setAttribute("user", user);
return true;
}
//跳轉到單點登錄界面
state = Const._SSO_LOGIN + Const.UNDERLINE + RandomUtil.getUUID();
request.getSession().setAttribute(state, uri);
String redirectUrl = buildAuthCodeUrl(uri, state);
response.sendRedirect(redirectUrl);
return false;
}
后面把前端vue請求后臺的登錄接口方式直接用
window.location.href=this.$api.config.baseUrl+"/system/user/login"
之后前端訪問系統(tǒng)，可以直接跳轉到單點登錄頁面。但是當我輸完賬號和密碼點擊登錄后回跳到系統(tǒng)，發(fā)現(xiàn)所有的請求數(shù)據(jù)接口都無法正常訪問，debug發(fā)現(xiàn)所有的請求都沒帶用戶信息，被攔截器識別為未登錄，所有請求無法通過。
為什么我明明登錄了呀，攔截器也設置了用戶信息到session啊，怎么cookies那就沒了呢？再次發(fā)起請求，發(fā)現(xiàn)每次請求的JsessionId都不一樣，查了很多資料，發(fā)現(xiàn)是需要在前端加一個允許帶認證信息的配置
axios.defaults.withCredentials=true;
后臺也需要做一個相應的配置allowCredentials(true);
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("*")
.allowedMethods("*")
.allowedOrigins("*").allowCredentials(true);
}
};
}
加完這個配置之后，重新執(zhí)行一遍操作流程，發(fā)現(xiàn)登錄之后能正常跳轉到系統(tǒng)，頁面數(shù)據(jù)也展示正常。
正當我以為大功告成的時候，突然點到一個頁面又無法正常顯示數(shù)據(jù)，好納悶啊，趕緊F12，發(fā)現(xiàn)一個之前沒見過的請求方式，OPTIONS請求，原來這個請求方式明明是POST呀，怎么就變成了OPTIONS了呢？于是我有點了其他幾個POST的請求，發(fā)現(xiàn)都變成了OPTIONS請求，一臉懵逼的我趕緊查了一下OPTIONS請求的資料，網上說OPTIONS請求叫做“預檢查請求”，就是在你的正式請求執(zhí)行之前，瀏覽器會先發(fā)起預檢查請求，預檢查請求通過了，才能執(zhí)行正式請求?？赐昊腥淮笪?，原來OPTIONS被攔截了，所以沒法再執(zhí)行我的POST的請求啊，那我直接讓預檢查請求通過就好了。只要在攔截器中加一個這個判斷就好了
//option預檢查，直接通過請求
if ("OPTIONS".equals(request.getMethod())){
return true;
}
這樣攔截器發(fā)現(xiàn)請求是預檢查請求就直接通過，就可以執(zhí)行接下來的POST的請求了。
總結
以上所述是小編給大家介紹的vue+springboot前后端分離實現(xiàn)單點登錄跨域問題解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了vue 使用 canvas 實現(xiàn)手寫電子簽名功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
在前端開發(fā)中,文件的壓縮和解壓縮是經常需要用到的功能,尤其是在需要上傳和下載文件的場景下,文件壓縮可以減小文件大小,加快文件傳輸速度,提高用戶體驗,本文將介紹在Vue項目中如何進行文件的壓縮和解壓縮,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了關于eslint常見的一些報錯及解決方法,解決eslint的報錯問題可以要根據(jù)報錯行數(shù)快速定位.文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue 組件間的通信之子組件向父組件傳值的方式總結,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了vue-cli 為項目設置別名的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
watch 函數(shù)用來偵聽特定的數(shù)據(jù)源,并在回調函數(shù)中執(zhí)行副作用,下面這篇文章主要給大家介紹了關于Vue3中watch監(jiān)聽使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue之帶參數(shù)跳轉打開新頁面、新窗口方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
混入mixin提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復用功能，一個混入對象可以包含任意組件選項，接下來通過本文給大家介紹VUE?mixin?使用,需要的朋友可以參考下2022-08-08
vue下載excel的實現(xiàn)代碼后臺用post方法
這篇文章主要介紹了vue下載excel的實現(xiàn)代碼,后臺用post方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
由于 Vue 會在初始化實例時進行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時才能進行上述過程 ，這樣才能讓它是響應的，這篇文章主要介紹了Vue中$set()的使用方法場景分析,需要的朋友可以參考下2023-02-02