這篇文章主要介紹了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"
axios.defaults.withCredentials=true;
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("*")
.allowedMethods("*")
.allowedOrigins("*").allowCredentials(true);
}
};
}//option预检查，直接通过请求
if ("OPTIONS".equals(request.getMethod())){
return true;
}########################################## #
以上是vue+springboot如何實作單一登入跨網域問題（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
