前端存储Cookie，利用JavaScript 或js-cookie
在前端登录时，存储 Cookie 是一种常见的做法，用于在用户的浏览器中保存会话信息（如认证令牌、用户ID等）。在前端处理登录流程时，通常会在用户乐成登录后，从服务器获取一个认证令牌（如 JWT），并将其存储在 Cookie 中。在后续的哀求中，浏览器会主动携带这个 Cookie，以便服务器验证用户的身份。以下是如何在前端存储 Cookie 的基本步调和示例代码。
一、利用 JavaScript 的 document.cookie 属性来设置 Cookie
1. 设置 Cookie
在前端，你可以利用 JavaScript 的 document.cookie 属性来设置 Cookie。
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 示例：设置名为'userToken'的Cookie，有效期为7天
setCookie('userToken', 'your_token_here', 7);
//在登陆请求时，存入
//const name = "Admin-Token";
//const expires = "; max-age=" + (30 * 24 * 60 * 60);
//document.cookie = name + "=" + (res.token || "") + expires + "; path=/"; 2. 读取 Cookie
要读取存储在浏览器中的 Cookie，你可以编写一个函数来剖析 document.cookie 字符串：
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca;
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// 示例：读取名为'userToken'的Cookie
const userToken = getCookie('userToken');
console.log(userToken); 3. 删除 Cookie
要删除一个 Cookie，你可以将其逾期时间设置为一个过去的日期：
function eraseCookie(name) {
document.cookie = name + '=; Max-Age=-99999999;';
}
// 示例：删除名为'userToken'的Cookie
eraseCookie('userToken'); 二、利用js-cookie库存储Cookie
js-cookie是一个轻量级的JavaScript库，用于处理浏览器的Cookie。它提供了一个简朴的API来设置、获取和删除Cookie。
1.安装js-cookie
利用npm或yarn，可以通过以下下令安装js-cookie
npm install js-cookie
# 或者
yarn add js-cookie 2.利用js-cookie
// 引入js-cookie
import Cookies from 'js-cookie';
// 直接使用
// 设置Cookie
Cookies.set('userToken', 'your_token_here', { expires: 7 }); // 7天后过期
// 读取Cookie
const userToken = Cookies.get('userToken');
console.log(userToken);
// 删除Cookie
Cookies.remove('userToken'); 注意：
安全性：确保利用 HTTPS 来保护传输中的数据；
逾期时间：公道设置 Cookie 的逾期时间，克制过短导致用户频仍登录，也克制过长导致安全风险；
跨域问题：如果应用涉及多个子域，须要精确设置 Cookie 的 domain 和 path 属性。
若文章对你有帮助，点赞、收藏加关注吧！https://i-blog.csdnimg.cn/direct/35967c5a8a7443a1a4dff39610286983.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]