vue+springboot前後端分離單點跨域登入

這次帶給大家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的請求了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue的專案結構須知

#vue實作購物車的小球拋物線效果詳解

以上是vue+springboot前後端分離單點跨域登入的詳細內容。更多資訊請關注PHP中文網其他相關文章！