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 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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中的观察者模式
2010/03/24 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
2015/11/17 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
html5唤起app的方法
2017/11/30 HTML / CSS
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
如何利用find命令查找文件
2015/02/07 面试题
土木工程专业自荐信
2013/10/04 职场文书
音乐专业应届生教师求职信
2013/11/04 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
环保标语口号
2014/06/13 职场文书
会计学专业求职信
2014/07/17 职场文书
海洋科学专业求职信
2014/08/10 职场文书
党支部季度考核意见
2015/06/02 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
Nginx配置之禁止指定IP访问
2022/05/02 Servers
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers