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

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

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

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

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

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

存儲(chǔ)信任
驗(yàn)證信任

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

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

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

Auth via cookie

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

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

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

方法二：通過(guò)JSONP實(shí)現(xiàn)

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

Auth via jsonp這種方式雖然能解決跨域問(wèn)題，但是安全性其實(shí)跟把信任存儲(chǔ)到Cookie是差不多的。如果一旦加密算法泄露了，攻擊者可以在本地建立一個(gè)實(shí)現(xiàn)了登錄接口的假冒父應(yīng)用，通過(guò)綁定Host來(lái)把子應(yīng)用發(fā)起的請(qǐng)求指向本地的假冒父應(yīng)用，并作出回應(yīng)。
因?yàn)楣粽咄耆梢园凑占用芩惴▉?lái)偽造響應(yīng)請(qǐng)求，子應(yīng)用接收到這個(gè)響應(yīng)之后一樣可以通過(guò)驗(yàn)證，并且登錄特定用戶。

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

Auth via redirect這種方式較前面兩種方式，接解決了上面兩種方法暴露出來(lái)的安全性問(wèn)題和跨域的問(wèn)題，但是并沒(méi)有前面兩種方式方便。
安全與方便，本來(lái)就是一對(duì)矛盾。

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

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

demo地址展示：

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

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

vue具體代碼：

先打入指令安裝js-cookie

npm i js-cookie -S

然后寫入登錄頁(yè)面

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="handleLogin">點(diǎn)擊登錄</button>
    <button @click="rethome">返回首頁(yè)</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
export default {
  name: 'home',
  data () {
    return {
      msg: '系統(tǒng)一登錄頁(yè)面'
    }
  },
  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>

接下來(lái)是首頁(yè)：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>用戶信息為：{{token}}</h3>
    <h3>登錄地點(diǎn)：{{loginname}}</h3>
    <button @click="logout">登出</button>
  </div>
</template>
 
<script>
import Cookies from 'js-cookie'
 
export default {
  name: 'home',
  data () {
    return {
      msg: '系統(tǒng)一主頁(yè)面',
      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)二的對(duì)應(yīng)頁(yè)面也只是把這兩個(gè)頁(yè)面弄過(guò)去，改下文字方便識(shí)別而已。

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

這里分享下我封好的控件demo，點(diǎn)擊這里查看文章

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

這個(gè)我還沒(méi)有寫好demo，這個(gè)給大家提供我找到的最靠譜的思路及demo

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