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 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
js验证是否为数字的总结
Apr 14 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 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
PHP5 安装方法
2006/10/09 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
IE与FireFox中的childNodes区别
2011/10/20 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
JSON对象转化为字符串详解
2017/08/11 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python素数检测的方法
2015/05/11 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Python3解释器知识点总结
2019/02/19 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python谱减法语音降噪实例
2019/12/18 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
汽车销售顾问求职自荐信
2014/01/01 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
Python List remove()实例用法详解
2021/08/02 Python