<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

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

        來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 22:20:41
        文檔

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

        vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法:最近在做一個后臺管理系統(tǒng),前端是用時下火熱的vue.js,后臺是基于springboot的。因?yàn)楹笈_系統(tǒng)沒有登錄功能,但是公司要求統(tǒng)一登錄,登錄認(rèn)證統(tǒng)一使用.net項(xiàng)目組的認(rèn)證系統(tǒng)。那就意味著做單點(diǎn)登錄咯,至于不知道什么是單點(diǎn)登錄的同學(xué),建議去找一下萬能的度娘
        推薦度:
        導(dǎo)讀vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法:最近在做一個后臺管理系統(tǒng),前端是用時下火熱的vue.js,后臺是基于springboot的。因?yàn)楹笈_系統(tǒng)沒有登錄功能,但是公司要求統(tǒng)一登錄,登錄認(rèn)證統(tǒng)一使用.net項(xiàng)目組的認(rèn)證系統(tǒng)。那就意味著做單點(diǎn)登錄咯,至于不知道什么是單點(diǎn)登錄的同學(xué),建議去找一下萬能的度娘

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

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

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

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

        這個配置就是允許所有mapping,所有請求頭,所有請求方法,所有源。改好配置之后我果斷重啟項(xiàng)目,看效果,結(jié)果發(fā)現(xiàn)根本沒法重定向跳轉(zhuǎn)到單點(diǎn)登錄頁面,看瀏覽器報錯是跨域?qū)е碌模蚁壬衔业卿洈r截器的代碼

        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<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;
         }
         //跳轉(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請求后臺的登錄接口方式直接用

        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)是需要在前端加一個允許帶認(rèn)證信息的配置

        axios.defaults.withCredentials=true;

        后臺也需要做一個相應(yīng)的配置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)登錄之后能正常跳轉(zhuǎn)到系統(tǒng),頁面數(shù)據(jù)也展示正常。

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

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

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

        總結(jié)

        以上所述是小編給大家介紹的vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

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

        vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法:最近在做一個后臺管理系統(tǒng),前端是用時下火熱的vue.js,后臺是基于springboot的。因?yàn)楹笈_系統(tǒng)沒有登錄功能,但是公司要求統(tǒng)一登錄,登錄認(rèn)證統(tǒng)一使用.net項(xiàng)目組的認(rèn)證系統(tǒng)。那就意味著做單點(diǎn)登錄咯,至于不知道什么是單點(diǎn)登錄的同學(xué),建議去找一下萬能的度娘
        推薦度:
        標(biāo)簽: 登錄 VUE 問題
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产成人亚洲综合a∨| 亚洲精品在线播放视频| 日本特黄特色AAA大片免费| 女人让男人免费桶爽30分钟| 亚洲综合欧美色五月俺也去| 毛片a级毛片免费播放100| 亚洲精品国产日韩| 国产在线不卡免费播放| 日韩色日韩视频亚洲网站| 四虎永久成人免费| 无码AV动漫精品一区二区免费| 亚洲成人高清在线| 最近免费中文字幕中文高清 | 99热这里有免费国产精品| 亚洲天堂男人天堂| 91精品免费在线观看| 亚洲AV成人一区二区三区在线看| 性xxxx视频播放免费| 黄网站色视频免费看无下截| 亚洲午夜国产片在线观看| 久久er国产精品免费观看2| 18亚洲男同志videos网站| 可以免费看的卡一卡二| 理论亚洲区美一区二区三区| 亚洲精品国产高清嫩草影院| 国产成年无码久久久免费| 亚洲视频一区在线观看| 午夜视频免费成人| a免费毛片在线播放| 亚洲黄色在线播放| 美女被免费视频网站a国产| av电影在线免费看| 亚洲国产精品美女| 亚洲成a人片在线观看老师| 99国产精品视频免费观看| 亚洲欧美日韩综合久久久| 国产亚洲精品拍拍拍拍拍| 91精品成人免费国产片| 美女又黄又免费的视频| 久久亚洲中文字幕精品有坂深雪 | 亚洲免费视频网站|