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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
vue请求数据的三种方式
Mar 04 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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二分法在IP地址查询中的应用
2008/08/12 PHP
php学习笔记之 函数声明
2011/06/09 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
javascript进行数组追加方法小结
2014/06/16 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
BootStrap中
2016/12/10 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python用Jira库来操作Jira
2020/12/28 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
求职信范文怎么写
2014/01/29 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
房地产开发项目建议书
2014/05/16 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
经济贸易系求职信
2014/08/04 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
小学运动会入场口号
2015/12/24 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python