前端token中4個(gè)存儲(chǔ)位置的優(yōu)缺點(diǎn)說(shuō)明

更新時(shí)間：2022年10月13日 09:27:07 作者：燕穗子博客

這篇文章主要介紹了前端token中4個(gè)存儲(chǔ)位置的優(yōu)缺點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

一、token是什么

Token: 訪問(wèn)資源的憑證。

一般用戶通過(guò)用戶名密碼登錄后，服務(wù)端會(huì)將登錄憑證做數(shù)字簽名，加密之后的字符串作為Token。

并在客戶端后面的向服務(wù)端的請(qǐng)求中攜帶，作為憑證。

二、token一般存放在哪里？

token 在客戶端一般存放于localStorage、cookie、或sessionStorage，vuex中。

1、localStorage

優(yōu)點(diǎn)： localStorage 生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在。相同瀏覽器的不同頁(yè)面間可以共享相同的localStorage (頁(yè)面屬中相可域名和端口)。
缺點(diǎn)：同一個(gè)屬性名的數(shù)據(jù)會(huì)被替換，不同瀏覽器無(wú)法共享localStorage或sessionStorage中的信息。

2、sessionStorage

優(yōu)點(diǎn)： sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁(yè)，sessionStorage的數(shù)據(jù)不會(huì)被其他窗口清除，頁(yè)面及標(biāo)簽頁(yè)僅指頂級(jí)窗口，如果一個(gè)標(biāo)簽頁(yè)包含多個(gè)iframe標(biāo)簽且他們屬于同源頁(yè)面，那么他們之間是可以共享sessionStorage的。
缺點(diǎn)：一旦窗口或標(biāo)簽頁(yè)被永久關(guān)閉了，那么所有通過(guò)sessionStorage存儲(chǔ)的數(shù)據(jù)也就被清空了。

將token存放在webstroage中，可以通過(guò)同域的js來(lái)訪問(wèn)。這樣會(huì)導(dǎo)致很容易受到 XSS攻擊，特別是項(xiàng)目中引入很多第三方j(luò)s類庫(kù)的情況下。如果js腳本被盜用，攻擊者就可以輕易訪問(wèn)你的網(wǎng)站，webStroage作為一種儲(chǔ)存機(jī)制，在傳輸過(guò)程中不會(huì)執(zhí)行任何安全標(biāo)準(zhǔn)。

XSS攻擊：cross-site Scripting (跨站腳本攻擊）是一種注入代碼攻擊。惡意攻擊者在目標(biāo)網(wǎng)站生注入script代碼，當(dāng)訪問(wèn)者瀏覽網(wǎng)站的時(shí)候通過(guò)執(zhí)行注入的script代碼達(dá)到竊取用戶信息，盜用用戶身份等。

3、存儲(chǔ)在cookie 中

讓它自動(dòng)發(fā)送，不過(guò)缺點(diǎn)就是不能跨域

將token存放在cookie中可以指定httponly，來(lái)防止被javascript讀取，也可以指定secure ，來(lái)保證token只在HTTPS下傳輸。缺點(diǎn)是不符合Restful 最佳實(shí)踐，容易受到CSRF攻擊。

CSRF跨站點(diǎn)請(qǐng)求偽造(Cross-Site Request Forgery)，跟XSS攻擊一樣，存在巨大的危害性。

簡(jiǎn)單來(lái)說(shuō)就是惡意攻擊者盜用已經(jīng)認(rèn)證過(guò)的用戶信息，以用戶信息名義進(jìn)行一些操作（如發(fā)郵件、轉(zhuǎn)賬、購(gòu)買商品等等）。由于身份已經(jīng)認(rèn)證過(guò)，所以目標(biāo)網(wǎng)站會(huì)認(rèn)為操作都是真正的用戶操作的。CSRF并不能拿到用戶信息，它只是盜用的用戶憑證去進(jìn)行操作。

4、Vuex

優(yōu)點(diǎn)：vuex的數(shù)據(jù)存儲(chǔ)在內(nèi)存中，保密性較高
缺點(diǎn)：刷新頁(yè)面(這里的刷新頁(yè)面指的是--> F5刷新,屬于清除內(nèi)存了)時(shí)vuex存儲(chǔ)的值會(huì)丟失

總結(jié)：也就是說(shuō),localStorage可存儲(chǔ)持久化的數(shù)據(jù);sessionStorage僅限于當(dāng)前窗口;vuex可存儲(chǔ)保密性較高的數(shù)據(jù)，但刷新頁(yè)面后數(shù)據(jù)會(huì)被清除.

三、token基本流程

（1）用戶登陸,發(fā)送手機(jī)號(hào)碼和驗(yàn)證碼

（2）后臺(tái)接收參數(shù),查找用戶,用戶存在就生成token,返回給前端

（3）前端登陸成功,把token存到vuex(做持久化)

（4）使用axios攔截器,讀取vuex中的token,并放入請(qǐng)求頭

（5）請(qǐng)求其他接口,就會(huì)帶上token

（6）后臺(tái)在需要登陸的接口上,獲取token,解密token獲得userId,返回前端需要的數(shù)據(jù)

（7）用戶在下次使用app,如果token還在有效期內(nèi),不需要重新登陸

客戶端使用用戶名跟密碼去請(qǐng)求登陸，服務(wù)度段收到請(qǐng)求，去驗(yàn)證用戶名和密碼，驗(yàn)證成功后，服務(wù)端會(huì)簽發(fā)一個(gè)token，再把這個(gè)token發(fā)送給客戶端，客戶頓收到token之后能夠把它存儲(chǔ)起來(lái)，

好比放在cookie里面或者local storage里面，客戶端每次向服務(wù)端請(qǐng)求資源的時(shí)候須要帶上服務(wù)端簽發(fā)的token，服務(wù)端收到請(qǐng)求，而后去驗(yàn)證客戶端請(qǐng)求里面帶著的token，若是驗(yàn)證成功，以某種方式好比隨機(jī)生成32位的字符串做為token，存儲(chǔ)在服務(wù)器中，并返回token到APP，

之后APP請(qǐng)求時(shí)，凡是須要驗(yàn)證的地方都要帶上該token，而后服務(wù)端驗(yàn)證token，成功返回所須要的結(jié)果，失敗返回錯(cuò)誤信息，從新登陸，服務(wù)器上的token設(shè)置一個(gè)有效期，每次APP請(qǐng)求時(shí)都要驗(yàn)證token和有效期。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: