Cookie 可以在本地主机上运行，但不能在实时运行，表示 cookieToken undefined

Question

浏览器已成功设置Cookie，但无法检索。在本地主机上工作正常，但在实时链接上面临问题。 cookie 标记显示未定义。这是代码-

// Function to get a cookie value by name
export const getCookie = (name) => {
  const cookies = document.cookie
    .split("; ")
    .find((row) => row.startsWith(`${name}=`));

  return cookies ? cookies.split("=")[1] : null;
};

// Function to set a cookie
export const setCookie = (name, value, days) => {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${name}=${value};${expires};path=/`;
};

// Function to delete a cookie
export const deleteCookie = (name) => {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
};

// Function to check if a cookie exists

export const checkCookie = (name) => {
  return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`));
};

// Function to get all cookies
export const getAllCookies = () => {
  return document.cookie.split("; ").map((row) => {
    const [key, value] = row.split("=");
    return { key, value };
  });
};

// Function to delete all cookies
export const deleteAllCookies = () => {
  document.cookie.split("; ").forEach((row) => {
    const [key] = row.split("=");
    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
  });
};

// Function to set multiple cookies

export const setMultipleCookies = (cookies) => {
  cookies.forEach((cookie) => {
    const { name, value, days } = cookie;
    setCookie(name, value, days);
  });
};

// Function to get multiple cookies
export const getMultipleCookies = (cookies) => {
  return cookies.map((cookie) => {
    const { name } = cookie;
    return getCookie(name);
  });
};

// Function to delete multiple cookies
export const deleteMultipleCookies = (cookies) => {
  cookies.forEach((cookie) => {
    const { name } = cookie;
    deleteCookie(name);
  });
};

// Function to check if multiple cookies exist
export const checkMultipleCookies = (cookies) => {
  return cookies.map((cookie) => {
    const { name } = cookie;
    return checkCookie(name);
  });
};

// Function to get all cookies

/* eslint-disable react/prop-types */
import { useEffect, useState } from "react";
import Cookies from "js-cookie";
import { decodeToken } from "../utils/jwt";
import { Navigate } from "react-router-dom";

// therapist
const TherapistPrivateRoute = ({ children }) => {
  const [decodedToken, setDecodedToken] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const cookieToken = Cookies.get("token");
    if (cookieToken) {
      const decoded = decodeToken(cookieToken);
      setDecodedToken(decoded);
    }
    setLoading(false);
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen w-screen">
        <div className="text-lg font-medium">Loading...</div>
      </div>
    );
  }

  // console.log(decodedToken);
  return decodedToken?.role === "therapist" ? children : <Navigate to="/" />;
};

export default TherapistPrivateRoute;

我需要从浏览器获取 cookie 令牌，以便我可以登录到我的仪表板。 cookie 令牌已在浏览器上成功设置，但无法检索它。

Answer 1

尝试添加域和路径限制、安全标志、SameSite 策略、HttpOnly 标志。

export const setCookie = (name, value, days) => {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = `expires=${date.toUTCString()}`;
  const secure = location.protocol === "https:" ? "secure" : "";
  document.cookie = `${name}=${value};${expires};path=/;samesite=strict;${secure}`;
};