前端存储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[i];
        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 属性。

若文章对你有帮助，点赞、收藏加关注吧！