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 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
html5中sharedWorker实现多页面通信的示例代码
May 07 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
采用call方式实现js继承
2014/05/20 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
详解redux异步操作实践
2018/08/15 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python写入xml文件的方法
2015/05/08 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
python range实例用法分享
2020/02/06 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
python如何更新包
2020/06/11 Python
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
关于雷锋的演讲稿
2014/05/10 职场文书
法制宣传标语
2014/06/23 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
导游词之桂林
2019/08/20 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python
Java使用HttpClient实现文件下载
2022/08/14 Java/Android