vue+springboot前后端分离实现单点登录跨域问题解决方法

  • 2022-05-15 07:50:18

最近在做一个后台管理系统,前端是用时下火热的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的请求了。

总结

以上所述是小编给大家介绍的vue+springboot前后端分离实现单点登录跨域问题解决方法,希望对大家有所帮助

猜你喜欢