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


Posted in Javascript onJanuary 30, 2018

最近在做一个后台管理系统,前端是用时下火热的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前后端分离实现单点登录跨域问题解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
vue scroller返回页面记住滚动位置的实例代码
Jan 29 #Javascript
浅析vue深复制
Jan 29 #Javascript
浅析从vue源码看观察者模式
Jan 29 #Javascript
实例学习JavaScript读取和写入cookie
Jan 29 #Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 #Javascript
JS中Object对象的原型概念基础
Jan 29 #Javascript
vue.js实现只弹一次弹框
Jan 29 #Javascript
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
Vue实现日历小插件
2019/06/26 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python创建和使用字典实例详解
2013/11/01 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Python使用OpenCV进行标定
2018/05/08 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
python自定义函数def的应用详解
2020/06/03 Python
详解Python中第三方库Faker
2020/09/25 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
给实习单位的感谢信
2014/02/01 职场文书
班主任先进事迹材料
2014/12/17 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python