vue+springboot前後端分離實作單點登入跨域問題處理

轉載聲明：商業轉載請聯系作者獲得授權,非商業轉載請注明出處.原文來自 © 呆萌鐘 vue+springboot前後端分離實作單點登入跨域問題處理

最近在做一個背景管理系統，前端是用時下火熱的vue.js，背景是基于springboot的。因為背景系統沒有登入功能，但是公司要求統一登入，登入認證統一使用.net項目組的認證系統。那就意味着做單點登入咯，至于不知道什麼是單點登入的同學，建議去找一下萬能的度娘。

剛接到這個需求的時候，老夫心裡便不屑的認為：區區登入何足挂齒，但是，開發的過程狠狠的打了我一巴掌（火辣辣的一巴掌）。。。，是以這次必須得好好記錄一下這次教訓，以免以後再踩這樣的坑。

我面臨的第一個問題是跨域，浏覽器控制台直接報CORS,以我多年開發經驗，我果斷在背景配置了跨域配置，代碼如下：

@Configuration
public class CorsConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins("*");
            }
        };
    }
}
           

這個配置就是允許所有mapping，所有請求頭，所有請求方法，所有源。改好配置之後我果斷重新開機項目，看效果，結果發現根本沒法重定向跳轉到單點登入頁面，看浏覽器報錯是跨域導緻的，我先上我登入攔截器的代碼

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    //使用者已經登入
    if (request.getSession().getAttribute("user") != null) {
        return true;
    }
    //從單點登入傳回之後的狀态，本系統還不處于登入狀态
    //根據code值去擷取access_token，然後再根據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);
        //根據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"
           

之後前端通路系統，可以直接跳轉到單點登入頁面。但是當我輸完賬号和密碼點選登入後回跳到系統，發現所有的請求資料接口都無法正常通路，debug發現所有的請求都沒帶使用者資訊，被攔截器識别為未登入，所有請求無法通過。

為什麼我明明登入了呀，攔截器也設定了使用者資訊到session啊，怎麼cookies那就沒了呢？再次發起請求，發現每次請求的JsessionId都不一樣，查了很多資料，發現是需要在前端加一個允許帶認證資訊的配置

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);
        }
    };
}
           

加完這個配置之後，重新執行一遍操作流程，發現登入之後能正常跳轉到系統，頁面資料也展示正常。

正當我以為大功告成的時候，突然點到一個頁面又無法正常顯示資料，好納悶啊，趕緊F12，發現一個之前沒見過的請求方式，OPTIONS請求，原來這個請求方式明明是POST呀，怎麼就變成了OPTIONS了呢？于是我有點了其他幾個POST的請求，發現都變成了OPTIONS請求，一臉懵逼的我趕緊查了一下OPTIONS請求的資料，網上說OPTIONS請求叫做“預檢查請求”，就是在你的正式請求執行之前，浏覽器會先發起預檢查請求，預檢查請求通過了，才能執行正式請求。看完恍然大悟，原來OPTIONS被攔截了，是以沒法再執行我的POST的請求啊，那我直接讓預檢查請求通過就好了。隻要在攔截器中加一個這個判斷就好了

//option預檢查，直接通過請求
if ("OPTIONS".equals(request.getMethod())){
    return true;
}
           

這樣攔截器發現請求是預檢查請求就直接通過，就可以執行接下來的POST的請求了。

轉載請注明：呆萌鐘 » vue+springboot前後端分離實作單點登入跨域問題處理