JavaScript實(shí)現(xiàn)單點(diǎn)登錄的示例
項(xiàng)目中遇到單點(diǎn)登錄這個(gè)問(wèn)題,當(dāng)點(diǎn)擊鏈接的時(shí)候跳轉(zhuǎn)到另一個(gè)系統(tǒng)中并實(shí)現(xiàn)自動(dòng)登錄進(jìn)去,直接進(jìn)去系統(tǒng)的頁(yè)面
因?yàn)椴煌南到y(tǒng)涉及到跨域的問(wèn)題,所以使用nginx來(lái)解決跨域的問(wèn)題
先跳轉(zhuǎn)到另一個(gè)系統(tǒng)的一個(gè)頁(yè)面,在這個(gè)頁(yè)面里實(shí)現(xiàn)登錄操作再跳轉(zhuǎn)到系統(tǒng)中我們需要的頁(yè)面
還有一個(gè)問(wèn)題就是登錄的時(shí)候需要用戶名和密碼,用戶名和密碼不是固定的,需要?jiǎng)討B(tài)獲取,所以跳轉(zhuǎn)到過(guò)渡頁(yè)面的時(shí)候需要攜帶參數(shù)
攜帶參數(shù)是通過(guò)url傳遞的,這里用戶名和密碼使用了簡(jiǎn)單的base64加密

過(guò)渡頁(yè)面接受參數(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)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. 理解PHP5中static和const關(guān)鍵字2. IntelliJ IDEA安裝插件的方法步驟3. php模擬實(shí)現(xiàn)斗地主發(fā)牌4. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟5. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)6. jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼7. Vuex localStorage的具體使用8. vue 使用localstorage實(shí)現(xiàn)面包屑的操作9. spring acegi security 1.0.0 發(fā)布10. MyBatis中的JdbcType映射使用詳解

網(wǎng)公網(wǎng)安備