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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
详解组件库的webpack构建速度优化
Jun 18 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
js实现选项卡效果
2020/03/07 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
Python Socket编程之多线程聊天室
2018/07/28 Python
详谈Python 窗体(tkinter)表格数据(Treeview)
2018/10/11 Python
python实现归并排序算法
2018/11/22 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
法制报告会主持词
2014/04/02 职场文书
户外宣传策划方案
2014/05/25 职场文书
基层党员公开承诺书
2014/05/29 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
公司员工活动策划方案
2014/08/20 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers