如何在Reactjs中删除cookie

Question

我正在开发一个web应用程序与react前端和节点后端

我想删除正在存储的cookie，以便能够成功地注销用户。我已经尝试使用js-cookie库和react-cookie库，但它不工作。

nav_component:

import React from "react";
import { Link, useHistory } from "react-router-dom";
import { useSelector } from "react-redux";
import { NavDropdown } from "react-bootstrap";
import Cookies from "js-cookie";
function Nav() {
const user = useSelector((state) => state.user);
const { name, id, loginId } = user;
const history = useHistory();
function logout() {
Cookies.remove("userId", { path: "/", domain: "localhost" });
localStorage.clear();
history.push("/login");
}
return (
<nav className="navbar navbar-expand navbar-light fixed-top">
<ul class="nav">
<li class="nav-item">
<Link to={"/"} class="nav-link active" aria-current="page">
Home
</Link>
</li>
<li class="nav-item">
<Link to={"/register"} class="nav-link">
Register
</Link>
</li>
<li class="nav-item">
<Link to={"/login"} class="nav-link">
Login
</Link>
</li>
<li class="nav-item">
<Link
to={"/admin"}
class="nav-link"
tabindex="-1"
aria-disabled="true"
>
Admin
</Link>
</li>
</ul>
{name ? (
<ul class="username">
<li>
<NavDropdown title={name}>
<NavDropdown.Item>
{id}: {loginId}
</NavDropdown.Item>
<NavDropdown.Item onClick={logout}>Logout</NavDropdown.Item>
</NavDropdown>
</li>
</ul>
) : null}
</nav>
);
}
export default Nav;

如何在后端设置cookie:

app.use(cookieParser());
app.use(
express.urlencoded({
extended: true,
})
);
app.use(
session({
key: "userId",
secret: "subscribe",
resave: false,
saveUninitialized: false,
cookies: {
expires: 60 * 60 * 8,
},
})
);
app.get("/login", (req, res) => {
if (req.session.user) {
res.send({ loggedIn: true, user: req.session.user });
} else {
res.send({ loggedIn: false });
}
});
app.post("/login", (req, res) => {
const LoginID = req.body.LoginID;
const Password = req.body.Password;
db.query(
"SELECT * FROM usermst WHERE LoginID = ? AND password = ?",
[LoginID, Password],
(err, result) => {
if (err) {
res.send({ err: err });
}
if (result.length > 0) {
const userid = result[0].UserID;
const token = jwt.sign({ userid }, "jwtSecret", {
expiresIn: 60 * 60 * 24,
});
req.session.user = result;
res.json({ auth: true, token: token, result: result });
} else {
res.send({ message: "Wrong LoginID/Password combination" });
}
}
);
});

应该注意的是，在我的后端有一些与JWT令牌相关的代码，但我还没有在我的前端实现它。我唯一实现的是cookie和会话。

Answer 1

在我的后端，我添加了以下代码用于注销，我从前端对其进行了axios请求:

res.clearCookie("userId", { path: "/" });
res
.status(200)
.json({ success: true, message: "User logged out successfully" });
};
app.get("/logout", logout, (req, res) => {
res.send("You have been logged out successfully");
});

,"userId"Id cookie的名称