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 相关文章推荐
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
JS检测图片大小的实例
Aug 21 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
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
Symfony2创建页面实例详解
2016/03/18 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
jquery maxlength使用说明
2011/09/09 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
python处理cookie详解
2014/02/07 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python 装饰器深入理解
2017/03/16 Python
python简单操作excle的方法
2018/09/12 Python
python读取与处理netcdf数据方式
2020/02/14 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Ajax的工作原理
2015/12/04 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
综治工作心得体会
2014/09/11 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
城南旧事读书笔记
2015/06/29 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
导游词之任弼时故居
2020/01/07 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android