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中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 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中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
如何基于python实现脚本加密
2019/12/28 Python
学习十八大精神心得体会
2013/12/31 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
语文教研活动总结
2014/07/02 职场文书
八年级英语教学计划
2015/01/23 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript