如何在 Reactjs 中删除 cookie

Question

我正在开发一个带有 React 前端和节点后端的 Web 应用程序

我想删除正在存储的 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 的名称

如何在 Reactjs 中删除 cookie

How to delete a cookie in Reactjs

javascript

cookies

node.js

reactjs