JavaScript實(shí)現(xiàn)單點(diǎn)登錄的示例
項(xiàng)目中遇到單點(diǎn)登錄這個(gè)問題,當(dāng)點(diǎn)擊鏈接的時(shí)候跳轉(zhuǎn)到另一個(gè)系統(tǒng)中并實(shí)現(xiàn)自動(dòng)登錄進(jìn)去,直接進(jìn)去系統(tǒng)的頁面
因?yàn)椴煌南到y(tǒng)涉及到跨域的問題,所以使用nginx來解決跨域的問題
先跳轉(zhuǎn)到另一個(gè)系統(tǒng)的一個(gè)頁面,在這個(gè)頁面里實(shí)現(xiàn)登錄操作再跳轉(zhuǎn)到系統(tǒng)中我們需要的頁面
還有一個(gè)問題就是登錄的時(shí)候需要用戶名和密碼,用戶名和密碼不是固定的,需要?jiǎng)討B(tài)獲取,所以跳轉(zhuǎn)到過渡頁面的時(shí)候需要攜帶參數(shù)
攜帶參數(shù)是通過url傳遞的,這里用戶名和密碼使用了簡(jiǎn)單的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實(shí)現(xiàn)單點(diǎn)登錄的示例的詳細(xì)內(nèi)容,更多關(guān)于JavaScript單點(diǎn)登錄的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 單點(diǎn)登錄的三種實(shí)現(xiàn)方式
- 基于JWT實(shí)現(xiàn)SSO單點(diǎn)登錄流程圖解
- springboot集成CAS實(shí)現(xiàn)單點(diǎn)登錄的示例代碼
- SpringBoot整合SSO(single sign on)單點(diǎn)登錄
- 詳解使用JWT實(shí)現(xiàn)單點(diǎn)登錄(完全跨域方案)
- 基于SpringBoot+Redis的Session共享與單點(diǎn)登錄詳解
- 使用springboot結(jié)合vue實(shí)現(xiàn)sso單點(diǎn)登錄
- 基于springboot和redis實(shí)現(xiàn)單點(diǎn)登錄
相關(guān)文章
JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析
這篇文章主要介紹了JS前后端實(shí)現(xiàn)身份證號(hào)驗(yàn)證代碼解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
js substring從右邊獲取指定長(zhǎng)度字符串(示例代碼)
本篇文章主要是對(duì)js substring從右邊獲取指定長(zhǎng)度字符串的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12
html5+javascript制作簡(jiǎn)易畫板附圖
這篇文章主要介紹了使用html5+javascript制作的簡(jiǎn)易畫板,需要的朋友可以參考下2014-04-04
解決WebStorm?2022.3.x?無法識(shí)別?Element?UI?2.15.11?新版本中的?el-
這篇文章主要介紹了解決?WebStorm?2022.3.x?無法識(shí)別?Element?UI?2.15.11?新版本中的?el-xxx?標(biāo)簽問題,本文給大家分享兩種解決方案,需要的朋友可以參考下2023-01-01
Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程詳解
dat.gui可以方便地向場(chǎng)景中添加控制條,隨時(shí)調(diào)整參數(shù)。下面這篇文章主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09
javascript制作照片墻及制作過程中出現(xiàn)的問題
這篇文章主要介紹了javascript制作照片墻及制作過程中出現(xiàn)的問題,感興趣的朋友可以參考一下2016-04-04
apply和call方法定義及apply和call方法的區(qū)別
apply和call功能一樣,只是傳入的參數(shù)列表形式不同,本文給大家介紹apply和call方法定義及apply和call方法的區(qū)別,感興趣的朋友一起學(xué)習(xí)吧2015-11-11

