最近在做一個(gè)后臺(tái)管理系統(tǒng)，前端是用時(shí)下火熱的vue.js，后臺(tái)是基于springboot的。因?yàn)楹笈_(tái)系統(tǒng)沒有登錄功能，但是公司要求統(tǒng)一登錄，登錄認(rèn)證統(tǒng)一使用.net項(xiàng)目組的認(rèn)證系統(tǒng)。那就意味著做單點(diǎn)登錄咯，至于不知道什么是單點(diǎn)登錄的同學(xué)，建議去找一下萬能的度娘。

剛接到這個(gè)需求的時(shí)候，老夫心里便不屑的認(rèn)為：區(qū)區(qū)登錄何足掛齒，但是，開發(fā)的過程狠狠的打了我一巴掌（火辣辣的一巴掌）。。。，所以這次必須得好好記錄一下這次教訓(xùn)，以免以后再踩這樣的坑。

我面臨的第一個(gè)問題是跨域，瀏覽器控制臺(tái)直接報(bào)CORS,以我多年開發(fā)經(jīng)驗(yàn)，我果斷在后臺(tái)配置了跨域配置，代碼如下：

@Configuration

public class CorsConfiguration {

? ? @Bean

? ? public WebMvcConfigurer corsConfigurer() {

? ? ? ? return new WebMvcConfigurerAdapter() {

? ? ? ? ? ? @Override

? ? ? ? ? ? public void addCorsMappings(CorsRegistry registry) {

? ? ? ? ? ? ? ? registry.addMapping("/**")

? ? ? ? ? ? ? ? ? ? ? ? .allowedHeaders("*")

? ? ? ? ? ? ? ? ? ? ? ? .allowedMethods("*")

? ? ? ? ? ? ? ? ? ? ? ? .allowedOrigins("*");

? ? ? ? ? ? }

? ? ? ? };

? ? }

}

這個(gè)配置就是允許所有mapping，所有請求頭，所有請求方法，所有源。改好配置之后我果斷重啟項(xiàng)目，看效果，結(jié)果發(fā)現(xiàn)根本沒法重定向跳轉(zhuǎn)到單點(diǎn)登錄頁面，看瀏覽器報(bào)錯(cuò)是跨域?qū)е碌?，我先上我登錄攔截器的代碼

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

? ? //用戶已經(jīng)登錄

? ? if (request.getSession().getAttribute("user") != null) {

? ? ? ? return true;

? ? }

? ? //從單點(diǎn)登錄返回之后的狀態(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 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;

? ? }

? ? //跳轉(zhuǎn)到單點(diǎn)登錄界面

? ? state = Const._SSO_LOGIN + Const.UNDERLINE + RandomUtil.getUUID();

? ? request.getSession().setAttribute(state, uri);

? ? String redirectUrl = buildAuthCodeUrl(uri, state);

? ? response.sendRedirect(redirectUrl);

? ? return false;

}

后面把前端vue請求后臺(tái)的登錄接口方式直接用

window.location.href=this.$api.config.baseUrl+"/system/user/login"

之后前端訪問系統(tǒng)，可以直接跳轉(zhuǎn)到單點(diǎn)登錄頁面。但是當(dāng)我輸完賬號和密碼點(diǎn)擊登錄后回跳到系統(tǒng)，發(fā)現(xiàn)所有的請求數(shù)據(jù)接口都無法正常訪問，debug發(fā)現(xiàn)所有的請求都沒帶用戶信息，被攔截器識別為未登錄，所有請求無法通過。

為什么我明明登錄了呀，攔截器也設(shè)置了用戶信息到session啊，怎么cookies那就沒了呢？再次發(fā)起請求，發(fā)現(xiàn)每次請求的JsessionId都不一樣，查了很多資料，發(fā)現(xiàn)是需要在前端加一個(gè)允許帶認(rèn)證信息的配置

axios.defaults.withCredentials=true;

后臺(tái)也需要做一個(gè)相應(yīng)的配置allowCredentials(true);

@Bean

public WebMvcConfigurer corsConfigurer() {

? ? return new WebMvcConfigurerAdapter() {

? ? ? ? @Override

? ? ? ? public void addCorsMappings(CorsRegistry registry) {

? ? ? ? ? ? registry.addMapping("/**")

? ? ? ? ? ? ? ? ? ? .allowedHeaders("*")

? ? ? ? ? ? ? ? ? ? .allowedMethods("*")

? ? ? ? ? ? ? ? ? ? .allowedOrigins("*").allowCredentials(true);

? ? ? ? }

? ? };

}

加完這個(gè)配置之后，重新執(zhí)行一遍操作流程，發(fā)現(xiàn)登錄之后能正常跳轉(zhuǎn)到系統(tǒng)，頁面數(shù)據(jù)也展示正常。

正當(dāng)我以為大功告成的時(shí)候，突然點(diǎn)到一個(gè)頁面又無法正常顯示數(shù)據(jù)，好納悶啊，趕緊F12，發(fā)現(xiàn)一個(gè)之前沒見過的請求方式，OPTIONS請求，原來這個(gè)請求方式明明是POST呀，怎么就變成了OPTIONS了呢？于是我有點(diǎn)了其他幾個(gè)POST的請求，發(fā)現(xiàn)都變成了OPTIONS請求，一臉懵逼的我趕緊查了一下OPTIONS請求的資料，網(wǎng)上說OPTIONS請求叫做“預(yù)檢查請求”，就是在你的正式請求執(zhí)行之前，瀏覽器會(huì)先發(fā)起預(yù)檢查請求，預(yù)檢查請求通過了，才能執(zhí)行正式請求?？赐昊腥淮笪颍瓉鞳PTIONS被攔截了，所以沒法再執(zhí)行我的POST的請求啊，那我直接讓預(yù)檢查請求通過就好了。只要在攔截器中加一個(gè)這個(gè)判斷就好了

//option預(yù)檢查，直接通過請求

if ("OPTIONS".equals(request.getMethod())){

? ? return true;

}

這樣攔截器發(fā)現(xiàn)請求是預(yù)檢查請求就直接通過，就可以執(zhí)行接下來的POST的請求了。

轉(zhuǎn)載請注明：呆萌鐘???vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題處理