JavaScript實現(xiàn)單點登錄的示例
更新時間：2020年09月23日 09:09:42 作者：氧化成風(fēng)
這篇文章主要介紹了JavaScript實現(xiàn)單點登錄的示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
項目中遇到單點登錄這個問題，當點擊鏈接的時候跳轉(zhuǎn)到另一個系統(tǒng)中并實現(xiàn)自動登錄進去，直接進去系統(tǒng)的頁面
因為不同的系統(tǒng)涉及到跨域的問題，所以使用nginx來解決跨域的問題
先跳轉(zhuǎn)到另一個系統(tǒng)的一個頁面，在這個頁面里實現(xiàn)登錄操作再跳轉(zhuǎn)到系統(tǒng)中我們需要的頁面
還有一個問題就是登錄的時候需要用戶名和密碼，用戶名和密碼不是固定的，需要動態(tài)獲取，所以跳轉(zhuǎn)到過渡頁面的時候需要攜帶參數(shù)
攜帶參數(shù)是通過url傳遞的，這里用戶名和密碼使用了簡單的base64加密
過渡頁面接受參數(shù)
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){ // 轉(zhuǎn)成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實現(xiàn)單點登錄的示例的詳細內(nèi)容，更多關(guān)于JavaScript單點登錄的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了javascript比較兩個日期相差天數(shù)的方法,涉及javascript針對日期的轉(zhuǎn)換與比較的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了js+css實現(xiàn)文字散開重組動畫特效,需要的朋友可以參考下2015-08-08
淺談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL
下面小編就為大家?guī)硪黄獪\談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
javascript HTML+CSS實現(xiàn)經(jīng)典橙色導(dǎo)航菜單
這篇文章主要介紹了javascript HTML+CSS實現(xiàn)經(jīng)典橙色導(dǎo)航菜單的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
生成xmlhttp的方法有很多，在本文為大家介紹下javaScript中是如何實現(xiàn)的2013-12-12
JavaScript實現(xiàn)移動端短信驗證碼流程介紹
這篇文章主要為大家詳細介紹了javascript實現(xiàn)移動端發(fā)送短信驗證碼案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-10-10
webpack前端應(yīng)用之基礎(chǔ)打包實現(xiàn)
本文主要介紹了webpack前端應(yīng)用之基礎(chǔ)打包實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
如何在JavaScript中等分數(shù)組的實現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分數(shù)組的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js
這篇文章主要介紹了通過兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了微信小程序用canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07