Hướng dẫn get token from cookie javascript - lấy mã thông báo từ cookie javascript

Bây giờ tôi đã lưu trữ JWT của mình trong cookie khi người dùng đăng nhập hoặc đăng ký nhưng dữ liệu không ở lại nên tôi đã tạo ra một chức năng để xử lý việc này nhưng tôi cần giá trị của mã thông báo để làm cho nó hoạt động

Đây là chức năng mà tôi cần giá trị mã thông báo cho

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common['x-auth-token'] = token;
  } else {
    delete axios.defaults.headers.common['x-auth-token'];
  }
};

Và đây là hành động của tôi mà tôi sử dụng trong React để gửi giá trị mã thông báo cho chức năng này, tôi đã cố gắng sử dụng JS-Cookies cho điều đó nhưng nó cho tôi không xác định

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Và đây là cookie nhận được của tôi trong trình duyệt

Cookies là các chuỗi dữ liệu nhỏ được lưu trữ trực tiếp trong trình duyệt. Chúng là một phần của giao thức HTTP, được xác định bởi đặc tả RFC 6265.

Cookie thường được đặt bởi máy chủ web bằng cách sử dụng phản hồi

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Một trong những trường hợp sử dụng phổ biến nhất là xác thực:

1. Khi đăng nhập, máy chủ sử dụng tiêu đề HTTP

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   4 trong phản hồi để đặt cookie với số nhận dạng phiên phiên duy nhất.
2. Lần tới khi yêu cầu được gửi đến cùng một miền, trình duyệt sẽ gửi cookie qua mạng bằng tiêu đề

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   5 HTTP.
3. Vì vậy, máy chủ biết ai đã thực hiện yêu cầu.

Chúng tôi cũng có thể truy cập cookie từ trình duyệt, sử dụng thuộc tính

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Có rất nhiều điều khó khăn về cookie và các lựa chọn của họ. Trong chương này, chúng tôi sẽ bao gồm họ một cách chi tiết.

Đọc từ Document.cookie

Trình duyệt của bạn có lưu trữ bất kỳ cookie từ trang web này không? Hãy xem nào:

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

Giá trị của

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

Để tìm một cookie cụ thể, chúng ta có thể chia

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

Chúng tôi để nó như một bài tập cho người đọc. Ngoài ra, ở cuối chương, bạn sẽ tìm thấy các chức năng của người trợ giúp để thao tác cookie.

Viết vào Document.cookie

Chúng ta có thể viết thư cho

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Một hoạt động viết cho

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Chẳng hạn, cuộc gọi này đặt cookie có tên

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

Nếu bạn chạy nó, thì có lẽ bạn sẽ thấy nhiều cookie. Điều đó bởi vì hoạt động

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

Về mặt kỹ thuật, tên và giá trị có thể có bất kỳ ký tự. Để giữ định dạng hợp lệ, chúng nên được thoát ra bằng cách sử dụng hàm

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

Giới hạn

Có một vài hạn chế:

• Cặp

  // At javascript.info, we use Google Analytics for statistics,
  // so there should be some cookies
  alert( document.cookie ); // cookie1=value1; cookie2=value2;...

  0, sau

  document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  0, không được vượt quá 4kb. Vì vậy, chúng tôi có thể lưu trữ bất cứ thứ gì lớn trong cookie.
• Tổng số cookie trên mỗi miền được giới hạn ở khoảng 20+, giới hạn chính xác phụ thuộc vào trình duyệt.

Cookie có một số tùy chọn, nhiều trong số chúng rất quan trọng và nên được thiết lập.

Các tùy chọn được liệt kê sau

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

// At javascript.info, we use Google Analytics for statistics,
// so there should be some cookies
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

đường dẫn

• document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  5

Tiền tố đường dẫn URL phải là tuyệt đối. Nó làm cho cookie có thể truy cập được cho các trang dưới đường dẫn đó. Theo mặc định, nó là đường dẫn hiện tại.

Nếu một cookie được đặt với

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

Thông thường, chúng ta nên đặt

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

miền

• // special characters (spaces), need encoding
  let name = "my name";
  let value = "John Smith"
  
  // encodes the cookie as my%20name=John%20Smith
  document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
  
  alert(document.cookie); // ...; my%20name=John%20Smith

  3

Một miền xác định nơi cookie có thể truy cập được. Trong thực tế mặc dù, có những hạn chế. Chúng tôi có thể thiết lập bất kỳ miền nào.

Không có cách nào để cho cookie có thể truy cập từ tên miền cấp 2 khác, vì vậy

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

Đó là một hạn chế an toàn, để cho phép chúng tôi lưu trữ dữ liệu nhạy cảm trong cookie chỉ có sẵn trên một trang web.

Theo mặc định, một cookie chỉ có thể truy cập tại miền đặt nó.

Xin lưu ý, theo mặc định, cookie cũng không được chia sẻ cho một tên miền phụ, chẳng hạn như

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Nhưng điều này có thể được thay đổi. Nếu chúng tôi muốn cho phép các tên miền phụ như

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

Để điều đó xảy ra, khi đặt cookie tại

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

Ví dụ:

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

Vì lý do lịch sử,

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

Để tóm tắt, tùy chọn

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

Hết hạn, tuổi tối đa

Theo mặc định, nếu một cookie không có một trong những tùy chọn này, nó sẽ biến mất khi trình duyệt được đóng. Những chiếc bánh quy như vậy được gọi là Cookies Phiên Cookies

Để cho cookie tồn tại một trình duyệt đóng, chúng ta có thể đặt tùy chọn

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

• document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

  7

Ngày hết hạn cookie xác định thời gian, khi trình duyệt sẽ tự động xóa nó.

Ngày phải chính xác ở định dạng này, trong múi giờ GMT. Chúng ta có thể sử dụng

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

// +1 day from now
let date = new Date(Date.now() + 86400e3);
date = date.toUTCString();
document.cookie = "user=John; expires=" + date;

Nếu chúng ta đặt

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

• // if we set a cookie at site.com website...
  document.cookie = "user=John"
  
  // ...we won't see it at forum.site.com
  alert(document.cookie); // no user

  0

Nó là một giải pháp thay thế cho

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

Nếu được đặt thành 0 hoặc giá trị âm, cookie sẽ bị xóa:

// cookie will die in +1 hour from now
document.cookie = "user=John; max-age=3600";

// delete cookie (let it expire right now)
document.cookie = "user=John; max-age=0";

chắc chắn

• // if we set a cookie at site.com website...
  document.cookie = "user=John"
  
  // ...we won't see it at forum.site.com
  alert(document.cookie); // no user

  2

Cookie chỉ nên được chuyển qua HTTPS.

Theo mặc định, nếu chúng tôi đặt cookie ở

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Đó là, cookie dựa trên miền, chúng không phân biệt giữa các giao thức.

Với tùy chọn này, nếu cookie được đặt bởi

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

SAMEMITE

Đó là một thuộc tính bảo mật khác

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Để hiểu cách thức hoạt động của nó và khi nó hữu ích, hãy để Lôi xem các cuộc tấn công XSRF.

XSRF tấn công

Hãy tưởng tượng, bạn được đăng nhập vào trang web

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Bây giờ, trong khi duyệt web trong một cửa sổ khác, bạn đã vô tình đến một trang web khác

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Trình duyệt gửi cookie mỗi khi bạn truy cập trang web

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

Đó là một cuộc tấn công được gọi là giả mạo yêu cầu chéo trên trang web của người Viking (tóm tắt, XSRF).

Các ngân hàng thực sự được bảo vệ khỏi nó tất nhiên. Tất cả các biểu mẫu được tạo bởi

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Một sự bảo vệ như vậy cần có thời gian để thực hiện mặc dù. Chúng tôi cần đảm bảo rằng mọi biểu mẫu đều có trường mã thông báo cần thiết và chúng tôi cũng phải kiểm tra tất cả các yêu cầu.

Nhập tùy chọn Cookie Samesite

Tùy chọn Cookie

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Nó có hai giá trị có thể:

• // at site.com
  // make the cookie accessible on any subdomain *.site.com:
  document.cookie = "user=John; domain=site.com"
  
  // later
  
  // at forum.site.com
  alert(document.cookie); // has cookie user=John

  9 (giống như

  // if we set a cookie at site.com website...
  document.cookie = "user=John"
  
  // ...we won't see it at forum.site.com
  alert(document.cookie); // no user

  8 không có giá trị)

Một cookie có

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

Nói cách khác, cho dù người dùng theo liên kết từ thư của họ hoặc gửi biểu mẫu từ

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

Nếu cookie xác thực có tùy chọn

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Việc bảo vệ khá đáng tin cậy. Chỉ các hoạt động đến từ

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Mặc dù, có một sự bất tiện nhỏ.

Khi người dùng theo một liên kết hợp pháp đến

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

Chúng tôi có thể làm việc xung quanh điều đó bằng cách sử dụng hai cookie: một cho nhận dạng chung của người dùng, chỉ vì mục đích nói: Hello Hello, John, và một cho các hoạt động thay đổi dữ liệu với

// at site.com
// make the cookie accessible on any subdomain *.site.com:
document.cookie = "user=John; domain=site.com"

// later

// at forum.site.com
alert(document.cookie); // has cookie user=John

• // cookie will die in +1 hour from now
  document.cookie = "user=John; max-age=3600";
  
  // delete cookie (let it expire right now)
  document.cookie = "user=John; max-age=0";

  3

Một cách tiếp cận thoải mái hơn cũng bảo vệ khỏi XSRF và không phá vỡ trải nghiệm người dùng.

Chế độ LAX, giống như

// cookie will die in +1 hour from now
document.cookie = "user=John; max-age=3600";

// delete cookie (let it expire right now)
document.cookie = "user=John; max-age=0";

Cookie

// cookie will die in +1 hour from now
document.cookie = "user=John; max-age=3600";

// delete cookie (let it expire right now)
document.cookie = "user=John; max-age=0";

1. Phương pháp HTTP là an toàn của người Hồi giáo (ví dụ: nhận, nhưng không đăng).

   Danh sách đầy đủ các phương thức HTTP an toàn nằm trong đặc tả RFC7231. Về cơ bản, đây là những phương pháp nên được sử dụng để đọc, nhưng không viết dữ liệu. Họ không được thực hiện bất kỳ hoạt động thay đổi dữ liệu. Theo một liên kết luôn luôn có được, phương pháp an toàn.

2. Hoạt động thực hiện điều hướng cấp cao nhất (thay đổi URL trong thanh địa chỉ trình duyệt).

   Điều đó thường đúng, nhưng nếu điều hướng được thực hiện trong một

   // cookie will die in +1 hour from now
   document.cookie = "user=John; max-age=3600";
   
   // delete cookie (let it expire right now)
   document.cookie = "user=John; max-age=0";

   6, thì nó không phải là cấp cao nhất. Ngoài ra, các phương thức JavaScript cho các yêu cầu mạng không thực hiện bất kỳ điều hướng nào, do đó chúng không phù hợp.

Vì vậy, những gì

// cookie will die in +1 hour from now
document.cookie = "user=John; max-age=3600";

// delete cookie (let it expire right now)
document.cookie = "user=John; max-age=0";

Nhưng bất cứ điều gì phức tạp hơn, như yêu cầu mạng từ một trang web khác hoặc gửi biểu mẫu, mất cookie.

Nếu điều đó tốt cho bạn, thì việc thêm

// cookie will die in +1 hour from now
document.cookie = "user=John; max-age=3600";

// delete cookie (let it expire right now)
document.cookie = "user=John; max-age=0";

Nhìn chung,

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Có một nhược điểm:

• // if we set a cookie at site.com website...
  document.cookie = "user=John"
  
  // ...we won't see it at forum.site.com
  alert(document.cookie); // no user

  8 bị bỏ qua (không được hỗ trợ) bởi các trình duyệt rất cũ, năm 2017 hoặc lâu hơn.

Vì vậy, nếu chúng tôi chỉ dựa vào

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

Nhưng chúng tôi chắc chắn có thể sử dụng

// if we set a cookie at site.com website...
document.cookie = "user=John"

// ...we won't see it at forum.site.com
alert(document.cookie); // no user

httponly

Tùy chọn này không liên quan gì đến JavaScript, nhưng chúng tôi phải đề cập đến nó để hoàn thiện.

Máy chủ web sử dụng tiêu đề

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Tùy chọn này cấm mọi quyền truy cập JavaScript vào cookie. Chúng ta có thể thấy một cookie như vậy hoặc thao tác nó bằng cách sử dụng

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Điều đó được sử dụng như một biện pháp phòng ngừa, để bảo vệ khỏi các cuộc tấn công nhất định khi một hacker tiêm mã JavaScript của riêng mình vào một trang và chờ người dùng truy cập trang đó. Điều đó không thể có được, tin tặc không thể đưa mã của họ vào trang web của chúng tôi, nhưng có thể có những lỗi cho phép họ làm điều đó.

Thông thường, nếu điều đó xảy ra và người dùng sẽ truy cập trang web với mã JavaScript của Hacker, thì mã đó sẽ thực thi và truy cập vào

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Nhưng nếu một cookie là

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Phụ lục: Chức năng cookie

Ở đây, một bộ nhỏ các chức năng để làm việc với cookie, thuận tiện hơn so với sửa đổi thủ công là

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Có nhiều thư viện cookie cho điều đó, vì vậy chúng là cho mục đích demo. Làm việc đầy đủ mặc dù.

getCookie(name)

Cách ngắn nhất để truy cập cookie là sử dụng một biểu thức thông thường.

Hàm

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Ở đây

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Xin lưu ý rằng giá trị cookie được mã hóa, do đó

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

setcookie (tên, giá trị, tùy chọn)

Đặt cookie từ

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

// special characters (spaces), need encoding
let name = "my name";
let value = "John Smith"

// encodes the cookie as my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(document.cookie); // ...; my%20name=John%20Smith

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

deleteCookie(name)

Để xóa cookie, chúng ta có thể gọi nó với ngày hết hạn âm:

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Cập nhật hoặc xóa phải sử dụng cùng một đường dẫn và miền

Xin lưu ý: Khi chúng tôi cập nhật hoặc xóa cookie, chúng tôi nên sử dụng chính xác cùng một đường dẫn và tùy chọn miền như khi chúng tôi đặt nó.

Cùng nhau: Cookie.js.

Phụ lục: Cookie của bên thứ ba

Một cookie được gọi là của bên thứ ba, nếu nó được đặt bởi một miền khác với trang mà người dùng đang truy cập.

Ví dụ:

1. Một trang tại

   // special characters (spaces), need encoding
   let name = "my name";
   let value = "John Smith"
   
   // encodes the cookie as my%20name=John%20Smith
   document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
   
   alert(document.cookie); // ...; my%20name=John%20Smith

   5 tải một biểu ngữ từ một trang web khác:

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   20.

2. Cùng với biểu ngữ, máy chủ từ xa tại

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   21 có thể đặt tiêu đề

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   4 với cookie như

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   23. Một cookie như vậy bắt nguồn từ miền

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   21 và sẽ chỉ hiển thị tại

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   21:

3. Lần tới khi truy cập

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   21, máy chủ từ xa sẽ nhận cookie

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   27 và nhận ra người dùng:

4. Điều quan trọng hơn nữa là, khi người dùng chuyển từ

   // special characters (spaces), need encoding
   let name = "my name";
   let value = "John Smith"
   
   // encodes the cookie as my%20name=John%20Smith
   document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
   
   alert(document.cookie); // ...; my%20name=John%20Smith

   5 sang một trang web khác

   // special characters (spaces), need encoding
   let name = "my name";
   let value = "John Smith"
   
   // encodes the cookie as my%20name=John%20Smith
   document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
   
   alert(document.cookie); // ...; my%20name=John%20Smith

   4, cũng có biểu ngữ, sau đó

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   21 nhận cookie, vì nó thuộc về

   import Cookies from 'js-cookie';
   //load user
   export const loadUser = () => async (dispatch) => {
     const token = Cookies.get('access_token');
     console.log(token);
     // if (cookie.access_token) {
     //   setAuthToken(cookie.access_token);
     // }
   
     try {
       const res = await axios.get('/user/me');
       dispatch({
         type: USER_LOADED,
         payload: res.data,
       });
     } catch (err) {
       dispatch({
         type: AUTH_ERROR,
       });
     }
   };
   

   21, do đó nhận ra khách truy cập và theo dõi anh ta khi anh ta di chuyển giữa các trang web:

Cookie của bên thứ ba theo truyền thống được sử dụng cho các dịch vụ theo dõi và quảng cáo, do bản chất của chúng. Chúng bị ràng buộc với miền gốc, vì vậy

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Đương nhiên, một số người không thích bị theo dõi, vì vậy trình duyệt cho phép vô hiệu hóa các cookie như vậy.

Ngoài ra, một số trình duyệt hiện đại sử dụng các chính sách đặc biệt cho các cookie như vậy:

• Safari hoàn toàn không cho phép cookie của bên thứ ba.
• Firefox đi kèm với một danh sách đen của người Hồi giáo, các tên miền của bên thứ ba, nơi nó chặn cookie của bên thứ ba.

Xin lưu ý:

Nếu chúng ta tải một tập lệnh từ miền của bên thứ ba, như

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

Nếu một tập lệnh đặt cookie, thì bất kể tập lệnh đến từ đâu - cookie thuộc về miền của trang web hiện tại.

Phụ lục: GDPR

Chủ đề này hoàn toàn không liên quan đến JavaScript, chỉ cần ghi nhớ khi đặt cookie.

Có một luật pháp ở châu Âu được gọi là GDPR, thực thi một bộ quy tắc để các trang web tôn trọng quyền riêng tư của người dùng. Một trong những quy tắc này là yêu cầu sự cho phép rõ ràng để theo dõi cookie từ người dùng.

Xin lưu ý rằng, chỉ có về việc theo dõi/xác định/ủy quyền cookie.

Vì vậy, nếu chúng tôi đặt một cookie chỉ lưu một số thông tin, nhưng không theo dõi cũng như không xác định người dùng, thì chúng tôi có thể tự do thực hiện nó.

Nhưng nếu chúng ta định đặt cookie với phiên xác thực hoặc ID theo dõi, thì người dùng phải cho phép điều đó.

Các trang web thường có hai biến thể của GDPR sau. Bạn phải thấy cả hai đã có trong web:

1. Nếu một trang web chỉ muốn đặt cookie theo dõi cho người dùng được xác thực.

   Để làm như vậy, biểu mẫu đăng ký phải có hộp kiểm như Chấp nhận chính sách quyền riêng tư (mô tả cách sử dụng cookie), người dùng phải kiểm tra và sau đó trang web được miễn phí đặt cookie xác thực.

2. Nếu một trang web muốn đặt cookie theo dõi cho mọi người.

   Để làm như vậy một cách hợp pháp, một trang web hiển thị một màn hình giật gân phương thức cho những người mới đến và yêu cầu họ đồng ý với cookie. Sau đó, trang web có thể đặt chúng và cho mọi người xem nội dung. Điều đó có thể gây rối cho khách mới mặc dù. Không ai thích nhìn thấy các màn hình giật gân phải nhấp chuột như vậy thay vì nội dung. Nhưng GDPR yêu cầu một thỏa thuận rõ ràng.

GDPR không chỉ là về cookie, mà còn về các vấn đề khác liên quan đến quyền riêng tư, mà còn vượt quá phạm vi của chúng tôi.

Bản tóm tắt

import Cookies from 'js-cookie';
//load user
export const loadUser = () => async (dispatch) => {
  const token = Cookies.get('access_token');
  console.log(token);
  // if (cookie.access_token) {
  //   setAuthToken(cookie.access_token);
  // }

  try {
    const res = await axios.get('/user/me');
    dispatch({
      type: USER_LOADED,
      payload: res.data,
    });
  } catch (err) {
    dispatch({
      type: AUTH_ERROR,
    });
  }
};

• Viết hoạt động chỉ sửa đổi cookie được đề cập trong đó.
• Tên/giá trị phải được mã hóa.
• Một cookie không được vượt quá kích thước 4kb. Số lượng cookie được phép trên một miền là khoảng 20+ (thay đổi theo trình duyệt).

Tùy chọn cookie:

• // special characters (spaces), need encoding
  let name = "my name";
  let value = "John Smith"
  
  // encodes the cookie as my%20name=John%20Smith
  document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
  
  alert(document.cookie); // ...; my%20name=John%20Smith

  2, theo đường dẫn hiện tại mặc định, làm cho cookie chỉ hiển thị dưới đường dẫn đó.

• // special characters (spaces), need encoding
  let name = "my name";
  let value = "John Smith"
  
  // encodes the cookie as my%20name=John%20Smith
  document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
  
  alert(document.cookie); // ...; my%20name=John%20Smith

  3, theo mặc định, cookie chỉ hiển thị trên miền hiện tại. Nếu miền được đặt rõ ràng, cookie sẽ hiển thị trên các tên miền phụ.

• document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

  5 hoặc

  document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

  6 đặt thời gian hết hạn cookie. Không có họ, cookie chết khi trình duyệt được đóng.

• // if we set a cookie at site.com website...
  document.cookie = "user=John"
  
  // ...we won't see it at forum.site.com
  alert(document.cookie); // no user

  2 làm cho cookie chỉ có https.

• // if we set a cookie at site.com website...
  document.cookie = "user=John"
  
  // ...we won't see it at forum.site.com
  alert(document.cookie); // no user

  8 cấm trình duyệt gửi cookie với các yêu cầu đến từ bên ngoài trang web. Điều này giúp ngăn chặn các cuộc tấn công XSRF.

Additionally:

• Cookie của bên thứ ba có thể bị cấm bởi trình duyệt, ví dụ: Safari làm điều đó theo mặc định.
• Khi đặt cookie theo dõi cho công dân EU, GDPR yêu cầu xin phép.

Làm thế nào để bạn có được token trong cookie?

Làm thế nào bạn có thể truy cập cookie từ JavaScript?

Làm cách nào để nhận mã thông báo JWT từ trình duyệt?

Làm cách nào để lưu mã thông báo JWT trong cookie?