快捷導(dǎo)航

Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題

更新時(shí)間：2023年04月21日 15:21:14 作者：To Do.

這篇文章主要介紹了Vue不同項(xiàng)目之間傳遞、接收參數(shù)問題,主要針對(duì)是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認(rèn)證和授權(quán)在UC完成，用戶發(fā)起資源請(qǐng)求，服務(wù)網(wǎng)關(guān)會(huì)進(jìn)行過濾，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下

描述一下場(chǎng)景

UC(User-Center)是單獨(dú)的一個(gè)項(xiàng)目，包括Spring Cloud + Vue, 服務(wù)項(xiàng)目是另一個(gè)項(xiàng)目，也是Spring Cloud+ Vue

這里主要針對(duì)是登錄操作，我們?yōu)榱送瓿蒘SO(Single Sign On)的效果，認(rèn)證和授權(quán)在UC完成，用戶發(fā)起資源請(qǐng)求，服務(wù)網(wǎng)關(guān)會(huì)進(jìn)行過濾，判斷請(qǐng)求頭中是否有token以及token是否過期，不滿足就會(huì)帶著原訪問資源項(xiàng)目的主頁(這里記為uri)重定向到登錄頁面,此時(shí)就是登錄的相關(guān)操作，進(jìn)行完以后會(huì)生成一個(gè)token標(biāo)識(shí)，這時(shí)候要根據(jù)帶來的uri進(jìn)行頁面跳轉(zhuǎn)，此時(shí)要帶上token標(biāo)識(shí)過去。

關(guān)于token的攜帶，以下是幾種方式的分析：

1.LocalStroage方式（不可?。?/h2>
如果可以用localStorage來存儲(chǔ)token，這樣就不用來回帶著token信息，直接在服務(wù)項(xiàng)目的vue請(qǐng)求攔截器中把token放到headers里邊就可以了？事實(shí)是不可取的，因?yàn)閘ocalStorage 只在有相同的協(xié)議、相同的主機(jī)名、相同的端口下，才能讀取/修改到同一份localStorage數(shù)據(jù)。這里我們是兩個(gè)vue項(xiàng)目，所以無法共享token，其次，假如這種方式可以，難道我們?cè)L問百度還能用訪問騰訊時(shí)候存的localStorage里邊的標(biāo)識(shí)？所以，PASS.

localStorage深入了解：localstorage 必知必會(huì)

2.Cookie方式（不推薦）

使用Cookie進(jìn)行共享，也就是說在UC的vue項(xiàng)目中，登錄成功，將token存入cookie中，在服務(wù)項(xiàng)目的vue請(qǐng)求攔截器中獲取cookie先存入localStorage中，然后放入headers，這樣之后每次從localStorage中拿出token放入headers即可。實(shí)現(xiàn)上是可以的因?yàn)閏ookie在兩個(gè)vue項(xiàng)目之間是共享的。但是，不好的點(diǎn)是，其一是如果cookie被禁用了怎么辦？，盡管可以處理但是還是說明這個(gè)方法存在一些明顯的不足，其次存cookie是很老套的方式，市面上也很少用到。關(guān)于多個(gè)cookie參數(shù)，如果獲取某一個(gè)cookie值的方法封裝：

 window.getCookie = function(name) {
       var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
       if (match) return match[2];
 }

存：

 document.cookie = "token=1234";

?。?/p>

let token = getCookie('token');

3.參數(shù)形式（時(shí)效性）

直接以參數(shù)形式傳遞，在另一方獲取請(qǐng)求參數(shù)，再放入localStorage中?？雌饋磉@種方式似乎是最直接的，其實(shí)來說它也保證了token的時(shí)效性，但是寫的時(shí)候可真給我惡心壞了，不說了只能怪咱百度不會(huì)用，其實(shí)以參數(shù)傳遞的方式還有很多種，可以多使用幾種，這里暫且總結(jié)一種，后序填坑。

傳: 拼到url中