如何在react中读取cookie来维护用户会话

Question

我正在尝试使用react实现用户登录。我从节点发送一个用cookie解析器创建的cookie来维护用户会话，但我无法用react访问该值，我尝试了js cookie库，但它没有读取已经创建的cookie的值，它总是返回一个空对象。有什么想法或建议吗？谢谢

在此处输入图像描述

import React, { useEffect, useState } from 'react'
import './style.scss'
import {Link, Redirect} from 'react-router-dom'
import axios from 'axios';
import Cookies from 'js-cookie';
export default function Login(props) {
const [data, setData] = useState({})
const [error,setError] = useState('')
const [login, setLogin] = useState(false)

const endpoint = "http://localhost:4000/users/login"
axios.defaults.withCredentials = true
function handleChange(e) {
const {name,value} = e.target;
setData({
...data,
[name] : value
})
}
useEffect(() =>  {
axios.get(endpoint).then(res => {
console.log(res.data)

}) }, [login])

const read = Cookies.get()
console.log(read)
const handleSubmit = (e) => {
e.preventDefault();
axios.post(endpoint,data).then(res => {

console.log(res)
setLogin(true)

}).catch(Error => {
setError("error")
})
}

Answer 1

首先你需要设置cookie来进行身份验证，用户登录后，你需要从后端发送一个令牌，然后你需要保存它，为它设置一个到期日，然后每次你从cookie中发布或放置请求以验证用户时都要读取并发送它，如果cookie无效则注销用户，你可以使用这些js函数来设置、删除，获取、更新cookie

function setCookie(cookieName, cookieValue, expiryHour) {
let d = new Date();
d.setTime(d.getTime() + expiryHour * 60 * 60 * 1000);
let expires = 'expires=' + d.toUTCString();
document.cookie = cookieName + '=' + cookieValue + ';' + expires + ';path=/';
}

function getCookie(cookieName) {
let name = cookieName + '=';
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return '';
}

function checkCookie(cookieName) {
let cookie = getCookie(cookieName);
if (cookie !== '') {
console.log(cookie + 'exist');
} else {
console.log('cookie doesnot exist set the cookie again');
}
}

function removeCookie(cookieName, path = '/') {
document.cookie =
cookieName + `=; Path=${path}; Expires=Thu, 01 Jan 1970 00:00:01 GMT`;
}