vue+springboot前后端分离实现单点登录跨域问题解决⽅
法
最近在做⼀个后台管理系统，前端是⽤时下⽕热的vue.js，后台是基于springboot的。因为后台系统没有登录功能，但是公司要求统⼀登录，登录认证统⼀使⽤项⽬组的认证系统。那就意味着做单点登录咯，⾄于不知道什么是单点登录的同学，建议去⼀下万能的度娘。
刚接到这个需求的时候，⽼夫⼼⾥便不屑的认为：区区登录何⾜挂齿，但是，开发的过程狠狠的打了我⼀巴掌（⽕辣辣的⼀巴掌）。。。，所以这次必须得好好记录⼀下这次教训，以免以后再踩这样的坑。
我⾯临的第⼀个问题是跨域，浏览器控制台直接报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 (Session().getAttribute("user") != null) {
return true;
}
jsessionid
//从单点登录返回之后的状态，本系统还不处于登录状态
//根据code值去获取access_token，然后再根据access_token去获取⽤户信息，并将⽤户信息存到session中
String state = Parameter("state");
String uri = getUri(request);
if (isLoginFromSSO(state)) {
String code = Parameter("code");
Object cacheUrl = Session().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=").de((String) cacheUrl));
String resp = client.post(SSOAuth.AccessTokenUrl, sb.toString());
Map<String, String> map = new Gson().fromJson(resp, Map.class);
//根据access_token去获取⽤户信息
String accessToken = ("access_token");
HttpUtil http = new HttpUtil();
http.addHeader("Authorization", "Bearer " + accessToken);
String encrypt = (SSOAuth.UserUrl);
String userinfo = decryptUserInfo(encrypt);
//封装成user对象
User user = new Gson().fromJson(userinfo, User.class);
return true;
}
//跳转到单点登录界⾯
state = Const._SSO_LOGIN + Const.UNDERLINE + UUID();
String redirectUrl = buildAuthCodeUrl(uri, state);
response.sendRedirect(redirectUrl);
return false;
}
后⾯把前端vue请求后台的登录接⼝⽅式直接⽤
window.location.href=this.$fig.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".Method())){
return true;
}
这样发现请求是预检查请求就直接通过，就可以执⾏接下来的POST的请求了。
总结
以上所述是⼩编给⼤家介绍的vue+springboot前后端分离实现单点登录跨域问题解决⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。