欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+springboot前后端分離實現(xiàn)單點登錄跨域問題解決方法

 更新時間：2018年01月30日 08:46:13   作者：呆萌鐘  
這篇文章主要介紹了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)
 //根據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"

之后前端訪問系統(tǒng)，可以直接跳轉到單點登錄頁面。但是當我輸完賬號和密碼點擊登錄后回跳到系統(tǒng)，發(fā)現(xiàn)所有的請求數據接口都無法正常訪問，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)，頁面數據也展示正常。

正當我以為大功告成的時候，突然點到一個頁面又無法正常顯示數據，好納悶啊，趕緊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 使用中的小技巧

    Vue 使用中的小技巧

    這篇文章主要介紹了Vue 使用中的小技巧,是小編日常開發(fā)的時候用到的小技巧，需要的朋友可以參考下
    2018-04-04
  • vue中如何利用js函數截取時間的年月日時分秒

    vue中如何利用js函數截取時間的年月日時分秒

    時分秒都是跟月份一樣,從0開始數的,不用+1,因為月是1-12月,而時分秒是0-23和0-59,下面這篇文章主要給大家介紹了關于vue中如何利用js函數截取時間的年月日時分秒的相關資料,需要的朋友可以參考下
    2022-11-11
  • vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能

    vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能

    這篇文章主要為大家詳細介紹了vuejs2.0運用原生js實現(xiàn)簡單拖拽元素功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-12-12
  • Vue生產環(huán)境調試的方法步驟

    Vue生產環(huán)境調試的方法步驟

    開發(fā)環(huán)境下Vue會提供很多警告來幫你對付常見的錯誤與陷阱,而在生產環(huán)境下,這些警告語句卻沒有用,反而會增加應用的體積,下面這篇文章主要給大家介紹了關于Vue生產環(huán)境調試的方法步驟,需要的朋友可以參考下
    2022-04-04
  • Vue.js進階知識點總結

    Vue.js進階知識點總結

    給大家分享了關于Vue.js想成為高手的5個總要知識點，需要的朋友可以學習下。
    2018-04-04
  • vue中的addEventListener和removeEventListener用法說明

    vue中的addEventListener和removeEventListener用法說明

    這篇文章主要介紹了vue中的addEventListener和removeEventListener用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-06-06
  • Vue通過ref父子組件拿值方法

    Vue通過ref父子組件拿值方法

    今天小編就為大家分享一篇Vue通過ref父子組件拿值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • npm?install時卡住不動的五種解決方法

    npm?install時卡住不動的五種解決方法

    在我們安裝完Node.js之后,需要使用npm命令來安裝一些工具,下面這篇文章主要給大家介紹了關于npm?install時卡住不動的五種解決方法,需要的朋友可以參考下
    2023-06-06
  • 使用Vue進行數據可視化實踐分享

    使用Vue進行數據可視化實踐分享

    在當今的數據驅動時代,數據可視化變得越來越重要,它能夠幫助我們更直觀地理解數據,從而做出更好的決策,在這篇博客中,我們將探索如何使用 Vue 和一些常見的圖表庫（如 Chart.js）來制作漂亮的數據可視化效果,需要的朋友可以參考下
    2024-10-10
  • Vue計算屬性實現(xiàn)成績單

    Vue計算屬性實現(xiàn)成績單

    這篇文章主要為大家詳細介紹了Vue計算屬性實現(xiàn)成績單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-08-08

最新評論