JavaScript实现单点登录的示例


Posted in Javascript onSeptember 23, 2020

项目中遇到单点登录这个问题,当点击链接的时候跳转到另一个系统中并实现自动登录进去,直接进去系统的页面

因为不同的系统涉及到跨域的问题,所以使用nginx来解决跨域的问题

先跳转到另一个系统的一个页面,在这个页面里实现登录操作再跳转到系统中我们需要的页面

还有一个问题就是登录的时候需要用户名和密码,用户名和密码不是固定的,需要动态获取,所以跳转到过渡页面的时候需要携带参数

携带参数是通过url传递的,这里用户名和密码使用了简单的base64加密

JavaScript实现单点登录的示例

过渡页面接受参数

var params = window.location.search;
  const params1 = params.match(/=(\S*)&/)[1];
  const params2 = params1.split("=")[1];
 
  const login = params1.split("&")[0];
  const pass = params1.split("=")[1];
  const url = params.split("url=")[1];

  var postData = {
    "login": login,
    "password": pass
  };

  postData = (function(obj){ // 转成post需要的字符串.
    var str = "";
    for(var prop in obj){
      str += prop + "=" + obj[prop] + "&"
    }
    return str;
  })(postData);

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/api/authentication/login", true);
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xhr.onreadystatechange = function(){
    var XMLHttpReq = xhr;
    if (XMLHttpReq.readyState == 4 && XMLHttpReq.status == 200) {
      location.replace(url);
    }
  };
  xhr.send(postData);

以上就是JavaScript实现单点登录的示例的详细内容,更多关于JavaScript单点登录的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
Mar 01 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
微信小程序实现animation动画
Jan 26 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 #Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 #Javascript
js实现三角形粒子运动
Sep 22 #Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 #Javascript
js实现删除json中指定的元素
Sep 22 #Javascript
vue使用canvas实现移动端手写签名
Sep 22 #Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 #Javascript
You might like
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
python 获取网页编码方式实现代码
2017/03/11 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
简单实现python数独游戏
2018/03/30 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
用C语言实现文件读写操作
2013/10/27 面试题
党委书记岗位职责
2013/11/24 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
运动会稿件100字
2014/09/24 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
海上钢琴师观后感
2015/06/03 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python