前景：

本周五的時(shí)候后端讓我從前端工程中排查，有沒有設(shè)置cookie。在我連續(xù)說了沒有的情況下，連續(xù)四次被質(zhì)疑。最后以我發(fā)四說沒有，不歡而散。 基于對前端的不信任，寫個(gè)小作文來說明vue前端怎么設(shè)置cookie

Cookie的概念性質(zhì)的東西這里不贅述。

一：Cookie生成機(jī)制

• 服務(wù)端生成，在 Http響應(yīng)頭 Respond-Header 中 Set-Cookie
• 客戶端生成

二：服務(wù)端生成

• 服務(wù)端可通過 Cookie類的構(gòu)造函數(shù)和實(shí)例方法設(shè)置Cookie（key=value）并返回，
• 瀏覽器收到響應(yīng)并發(fā)現(xiàn)響應(yīng)頭中有 Set-Cookie，瀏覽器就會把key、value保存在瀏覽器中。
• 在向同一個(gè)域名發(fā)起的后續(xù)請求中，瀏覽器會在請求頭中加上該cookie字段（除非它過期了）。

服務(wù)器端通過設(shè)置Set-Cookie 的 Expires 和 Max-Age兩個(gè)屬性來設(shè)置cookie的有效期

1、Expires 

Set-Cookie: sessionId=abc123; Expires=Thu, 01 Jan 1970 00:00:00 UTC;

Expires 的值必須是一個(gè)完整的日期和時(shí)間，包括年、月、日、時(shí)、分、秒和時(shí)區(qū)。

• Expires 值為 過去時(shí)，瀏覽器立馬刪除該Cookie；
• Expires 值為 將來時(shí)，瀏覽器會在將來的那個(gè)時(shí)點(diǎn)刪除該Cookie

2、Max-Age

Set-Cookie: sessionId=abc123; Max-Age=0;

Max-Age的值是個(gè)秒值。

• Max-Age = 0；瀏覽器立即刪除該Cookie
• Max-Age = -1;  瀏覽器重啟后Cookie消失。關(guān)閉當(dāng)前頁簽或者關(guān)閉瀏覽器，Cookie都會消失。
• Max-Age=3600; 表示3600 秒（即 1H）內(nèi)有效，超期失效。

同時(shí)設(shè)置這倆屬性時(shí)，Max-Age 的優(yōu)先級高于Expires

三：客戶端生成方式

• JavaScript 自帶的 document.cookie
• 第三方依賴庫：如js-cookie

1、document.cookie

// 設(shè)置cookie
document.cookie = 'sessionId=abc123; path=/'

// 獲取Cookie值
const getCookie = name => {
  var cookies = document.cookie.split(";");
  for (let i = 0; i < cookies.length; i++) {
    const [key, value] = cookies[i].split("=")
    if (key.trim() === name) {
      return value;
    }
  }
  return ""
};


// 刪除cookie 
// 方式：將cookie的 過期時(shí)間（expires）屬性指定為一個(gè)過去的時(shí)間
const deleteCookie = name => { 
  document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';  
}
deleteCookie('password');

2、js-cookie

import Cookies from 'js-cookie';  

// 設(shè)置cookie  
Cookies.set('sessionId', 'abc123');  
  
// 獲取cookie  
const sessionId = Cookies.get('sessionId');  
  
// 刪除cookie  
Cookies.remove('sessionId');

四：--------- 我是分割線 ---------

前端是否設(shè)置cookie，工程中全局搜索cookie關(guān)鍵字，就能判斷前端是否做了特殊處理。

cookie通過瀏覽器自動(dòng)管理，大多數(shù)情況下前端并不需要處理cookie。

瀏覽器本地?cái)?shù)據(jù)存儲：建議使用web storage（包括localStorage和sessionStorage）。更大的存儲空間（5M左右），提供了多個(gè)屬性和方法，數(shù)據(jù)操作更簡單。

五：鑒權(quán)

1）cookie的缺點(diǎn)

• 不安全：cookie的鍵值對都是明文，用戶可通過瀏覽器或其他工具拿到cookie，可能被篡改（document.cookie），存在安全隱患。因cookie存在安全問題，有些企業(yè)的內(nèi)網(wǎng)或安全策略會要求禁用cookie。
• 容量限制：每個(gè)cookie的大小不超過4KB，單個(gè)域名設(shè)置的Cookie數(shù)量有限制。
• 不能存實(shí)例
• 一些設(shè)備或?yàn)g覽器可能不支持cookie
• 跨域問題
• ...

因上面的缺點(diǎn)，cookie不適合做鑒權(quán)，需要用session配合。

2）Session

Cookie將內(nèi)容（key、value等信息）通過響應(yīng)頭返回。如果這些內(nèi)容不直接返回，而是保存在服務(wù)器端，給內(nèi)容取個(gè)名字叫session上下文，給上下文取個(gè)id叫SessionId（隨便叫什么id都行）?？蛻舳烁?wù)器端通過SessionId關(guān)聯(lián)。

SessionId通常以Cookie的形式存儲在客戶端。但Cookie并不是唯一方式，URL也可以。不過URL方式對用戶不友好，所以基本上沒有互聯(lián)網(wǎng)項(xiàng)目會采用這種方案。

Session的問題

• Session中保存的數(shù)據(jù)的大小要考慮到存儲上限
• 依賴Session的關(guān)鍵業(yè)務(wù)一定要確?？蛻舳碎_啟了Cookie
• 在負(fù)載均衡的情況下，由于存在Web服務(wù)器內(nèi)存中的Session無法共享，通常需要重寫Session的實(shí)現(xiàn)。
• Session內(nèi)容的丟失都是有原因的，通常都是由于Web服務(wù)器的重啟造成的

cookie或者sesssion，都是后端在主導(dǎo)，前端相關(guān)的動(dòng)作都是由標(biāo)準(zhǔn)瀏覽器來完成。js在其中只是用戶體驗(yàn)的工作，而不是邏輯功能層面的工作

現(xiàn)在最普遍的鑒權(quán)方案是：Token。

3）Token

Token 是在服務(wù)端產(chǎn)生的。前端使用用戶名/密碼向服務(wù)端請求認(rèn)證，服務(wù)端認(rèn)證成功，那么服務(wù)端會返回 Token 給前端。前端可以在每次請求的時(shí)候帶上 Token 證明自己的合法地位。

Token的全稱是JSON Web Token，簡稱jwt。

詳述

前端使用用戶名/密碼向服務(wù)端請求認(rèn)證，服務(wù)端認(rèn)證成功后，將用戶id等信息進(jìn)行打包，打包時(shí)利用secret（HS256算法、RS256算法等）加密，那么服務(wù)端會返回 Token 給前端。

前端拿到token，是解不開的，因?yàn)榉?wù)器肯定不會把secret傳給前端，讓前端去解。

前端可以在每次請求的時(shí)候帶上 Token 證明自己的合法地位。后端在請求頭（一般放在請求頭）中拿到這個(gè)Token，進(jìn)行驗(yàn)證。驗(yàn)證主要是兩個(gè)層面：簽名是否有效，是否過期。

總結(jié)

到此這篇關(guān)于Vue前端如何設(shè)置Cookie和鑒權(quán)問題的文章就介紹到這了,更多相關(guān)Vue前端設(shè)置Cookie和鑒權(quán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論