前景：

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

Cookie的概念性質的東西這里不贅述。

一：Cookie生成機制

• 服務端生成，在 Http響應頭 Respond-Header 中 Set-Cookie
• 客戶端生成

二：服務端生成

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

服務器端通過設置Set-Cookie 的 Expires 和 Max-Age兩個屬性來設置cookie的有效期

1、Expires 

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

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

• Expires 值為 過去時，瀏覽器立馬刪除該Cookie；
• Expires 值為 將來時，瀏覽器會在將來的那個時點刪除該Cookie

2、Max-Age

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

Max-Age的值是個秒值。

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

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

三：客戶端生成方式

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

1、document.cookie

// 設置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的 過期時間（expires）屬性指定為一個過去的時間
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';  

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

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

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

cookie通過瀏覽器自動管理，大多數情況下前端并不需要處理cookie。

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

五：鑒權

1）cookie的缺點

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

因上面的缺點，cookie不適合做鑒權，需要用session配合。

2）Session

Cookie將內容（key、value等信息）通過響應頭返回。如果這些內容不直接返回，而是保存在服務器端，給內容取個名字叫session上下文，給上下文取個id叫SessionId（隨便叫什么id都行）?？蛻舳烁掌鞫送ㄟ^SessionId關聯。

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

Session的問題

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

cookie或者sesssion，都是后端在主導，前端相關的動作都是由標準瀏覽器來完成。js在其中只是用戶體驗的工作，而不是邏輯功能層面的工作

現在最普遍的鑒權方案是：Token。

3）Token

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

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

詳述

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

前端拿到token，是解不開的，因為服務器肯定不會把secret傳給前端，讓前端去解。

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

總結

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

最新評論