一、token是什么 

Token: 訪問資源的憑證。

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

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

二、token一般存放在哪里？

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

1、localStorage

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

2、sessionStorage

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

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

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

3、存儲(chǔ)在cookie 中

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

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

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

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

4、Vuex

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

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

三、token基本流程

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論