快捷導(dǎo)航

vue實現(xiàn)單點登錄的方式匯總

更新時間：2021年11月05日 09:44:40 作者：林恒

最近項目停工了，RageFrame的學(xué)習(xí)暫時告一段落，這一篇給大家分享下有關(guān)單點登錄的相關(guān)知識，并提供一些demo給大家參考，對vue單點登錄的實現(xiàn)方式感興趣的朋友一起看看吧

最近項目停工了，RageFrame的學(xué)習(xí)暫時告一段落，這一篇給大家分享下有關(guān)單點登錄的相關(guān)知識，并提供一些demo給大家參考，希望對想了解的朋友有一些幫助。

話不多說，先上原理（借鑒地址：https://www.jianshu.com/p/613e44d4a464）

點登錄SSO（Single Sign On）說得簡單點就是在一個多系統(tǒng)共存的環(huán)境下，用戶在一處登錄后，就不用在其他系統(tǒng)中登錄，也就是用戶的一次登錄能得到其他所有系統(tǒng)的信任。單點登錄在大型網(wǎng)站里使用得非常頻繁，例如像阿里巴巴這樣的網(wǎng)站，在網(wǎng)站的背后是成百上千的子系統(tǒng)，用戶一次操作或交易可能涉及到幾十個子系統(tǒng)的協(xié)作，如果每個子系統(tǒng)都需要用戶認(rèn)證，不僅用戶會瘋掉，各子系統(tǒng)也會為這種重復(fù)認(rèn)證授權(quán)的邏輯搞瘋掉。實現(xiàn)單點登錄說到底就是要解決如何產(chǎn)生和存儲那個信任，再就是其他系統(tǒng)如何驗證這個信任的有效性，因此要點也就以下兩個：

存儲信任
驗證信任

如果一個系統(tǒng)做到了開頭所講的效果，也就算單點登錄，單點登錄有不同的實現(xiàn)方式，本文就列出我開發(fā)中所遇見過的實現(xiàn)方式。

方法一：以Cookie作為憑證媒介

最簡單的單點登錄實現(xiàn)方式，是使用cookie作為媒介，存放用戶憑證。
用戶登錄父應(yīng)用之后，應(yīng)用返回一個加密的cookie，當(dāng)用戶訪問子應(yīng)用的時候，攜帶上這個cookie，授權(quán)應(yīng)用解密cookie并進行校驗，校驗通過則登錄當(dāng)前用戶。

Auth via cookie

不難發(fā)現(xiàn)以上方式把信任存儲在客戶端的Cookie中，這種方式很容易令人質(zhì)疑：

Cookie不安全
不能跨域?qū)崿F(xiàn)免登

對于第一個問題，通過加密Cookie可以保證安全性，當(dāng)然這是在源代碼不泄露的前提下。如果Cookie的加密算法泄露，攻擊者通過偽造Cookie則可以偽造特定用戶身份，這是很危險的。
對于第二個問題，更是硬傷。

方法二：通過JSONP實現(xiàn)

對于跨域問題，可以使用JSONP實現(xiàn)。
用戶在父應(yīng)用中登錄后，跟Session匹配的Cookie會存到客戶端中，當(dāng)用戶需要登錄子應(yīng)用的時候，授權(quán)應(yīng)用訪問父應(yīng)用提供的JSONP接口，并在請求中帶上父應(yīng)用域名下的Cookie，父應(yīng)用接收到請求，驗證用戶的登錄狀態(tài)，返回加密的信息，子應(yīng)用通過解析返回來的加密信息來驗證用戶，如果通過驗證則登錄用戶。

Auth via jsonp這種方式雖然能解決跨域問題，但是安全性其實跟把信任存儲到Cookie是差不多的。如果一旦加密算法泄露了，攻擊者可以在本地建立一個實現(xiàn)了登錄接口的假冒父應(yīng)用，通過綁定Host來把子應(yīng)用發(fā)起的請求指向本地的假冒父應(yīng)用，并作出回應(yīng)。
因為攻擊者完全可以按照加密算法來偽造響應(yīng)請求，子應(yīng)用接收到這個響應(yīng)之后一樣可以通過驗證，并且登錄特定用戶。

方法三：通過頁面重定向的方式最后一種介紹的方式，是通過父應(yīng)用和子應(yīng)用來回重定向中進行通信，實現(xiàn)信息的安全傳遞。
父應(yīng)用提供一個GET方式的登錄接口，用戶通過子應(yīng)用重定向連接的方式訪問這個接口，如果用戶還沒有登錄，則返回一個的登錄頁面，用戶輸入賬號密碼進行登錄。如果用戶已經(jīng)登錄了，則生成加密的Token，并且重定向到子應(yīng)用提供的驗證Token的接口，通過解密和校驗之后，子應(yīng)用登錄當(dāng)前用戶。

Auth via redirect這種方式較前面兩種方式，接解決了上面兩種方法暴露出來的安全性問題和跨域的問題，但是并沒有前面兩種方式方便。
安全與方便，本來就是一對矛盾。

方法四：使用獨立登錄系統(tǒng)一般說來，大型應(yīng)用會把授權(quán)的邏輯與用戶信息的相關(guān)邏輯獨立成一個應(yīng)用，稱為用戶中心。
用戶中心不處理業(yè)務(wù)邏輯，只是處理用戶信息的管理以及授權(quán)給第三方應(yīng)用。第三方應(yīng)用需要登錄的時候，則把用戶的登錄請求轉(zhuǎn)發(fā)給用戶中心進行處理，用戶處理完畢返回憑證，第三方應(yīng)用驗證憑證，通過后就登錄用戶。

以上，就是我了解的單點登錄的給個模式及原理，下面給大家上實戰(zhàn)代碼，這里我列舉兩種情況，分類給大家講解和提供我對應(yīng)的demo（以下理論參考http://www.dbjr.com.cn/article/98228.htm）環(huán)境1:a.xxx.com需要跟b.xxx.com實現(xiàn)跨域,這種比較簡單,只需要設(shè)置cookie的域名關(guān)聯(lián)域就可以了 cookie.Domain = "xxx.com",這樣兩個域名間的cookie就可以互相訪問,實現(xiàn)跨域.

demo地址展示：

系統(tǒng)一：sso1.linheng.xyz

系統(tǒng)二：sso2.linheng.xyz

vue具體代碼：

先打入指令安裝js-cookie

npm i js-cookie -S

然后寫入登錄頁面

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="handleLogin">點擊登錄</button>
    <button @click="rethome">返回首頁</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
export default {
  name: 'home',
  data () {
    return {
      msg: '系統(tǒng)一登錄頁面'
    }
  },
  methods: {
        handleLogin() {
        var token = this.randomString();
        Cookies.set('app.token',token, { expires: 1000, path: '/', domain: '.**.com' })//這里換你的網(wǎng)站根目錄
        Cookies.set('app.loginname','系統(tǒng)一', { expires: 1000, path: '/', domain: '.**.com' })//這里換你的網(wǎng)站根目錄
        this.$router.push("/");
    },
    rethome(){
      this.$router.push("/");
    },
    randomString(e) {
        e = e || 32;
        var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
        a = t.length,
        n = "";
        for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
        return n
    }
    }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

接下來是首頁：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>用戶信息為：{{token}}</h3>
    <h3>登錄地點：{{loginname}}</h3>
    <button @click="logout">登出</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
 
export default {
  name: 'home',
  data () {
    return {
      msg: '系統(tǒng)一主頁面',
      token:'',
      loginname:''
    }
  },
  mounted(){
    const token = Cookies.get('app.token');
    this.token = token;
    const loginname = Cookies.get('app.loginname');
    this.loginname = loginname;
    console.log(token);
    if(!token){
      this.$router.push("/login");
    }
  },
  methods: {
    logout(){
         Cookies.set('app.token','', { expires: 1000, path: '/', domain: '.**.com' })//這里換你的網(wǎng)站根目錄
        Cookies.set('app.loginname','', { expires: 1000, path: '/', domain: '.**.com' })//這里換你的網(wǎng)站根目錄
        this.$router.go(0)
    }
    }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

系統(tǒng)二的對應(yīng)頁面也只是把這兩個頁面弄過去，改下文字方便識別而已。

寫到這里，大家對于這個的思路已經(jīng)比較清晰了，如果需要優(yōu)化，我這邊建議大家把判斷和獲取的方法統(tǒng)一弄成控件，然后在router里進行操作，這樣會更好。

這里分享下我封好的控件demo，點擊這里查看文章

環(huán)境2:a.aaa.com需要跟b.bbb.com實現(xiàn)跨域,這種不同域名的情況下,想要實現(xiàn)就必須換種方式了.

這個我還沒有寫好demo，這個給大家提供我找到的最靠譜的思路及demo

在這里我將引入第三者,s.sss.com這個站點,就是某個瀏覽器同時打開了這3個站點,我們訪問A站點,先判斷自身是否登錄,如果session為空,就重定向到S站點,判斷S站點上面是否有cookie,如果S站點上面也沒有cookie,則由S站點重定向到A站點的登錄頁.這樣我們就實現(xiàn)了第一步,S站做的的就是隱藏在幕后,子站先判斷自己是否存在session,如果不存在,就重定向到主站S上面去驗證.第二步,驗證登錄信息合法性.這里我引入token(令牌),網(wǎng)上有很多資料,描述token的傳遞,工作方式是這樣,A登錄成功,保存自身的session,重定向到S,S在自己站點保存一個session跟cookie,session保存token對象{tokenID,userName,startTime,endTime},cookie保存tokenID,tokenID是一個Guid,把token對象緩存在集合里面,另起一個線程,根據(jù)endTime(過期時間)來定期清理集合列表,重定向到A的時候再將tokenID傳遞過去,拿到tokenID后,進入驗證環(huán)節(jié),S站有提供一個接口,根據(jù)tokenID獲取token對象,如果獲取到對象,且沒有失效,則tokenID合法,跳入index頁面.情況2,A登錄,直接打開B,這時候B自身沒有session,會主動請求主站,主站會返回cookieID(S站存在客戶端的cookie),這個時候再走驗證環(huán)節(jié),如果通過,則B根據(jù)token對象創(chuàng)建自身的session,再跳入index.在這里整個單點登錄就已經(jīng)成功了,接下來附上流程圖: