當我輸入錯誤的憑據時，為什么我的后端會崩潰？

在我的登錄頁面中，當我輸入錯誤的憑據時后端崩潰。我不希望我的后端崩潰。我該如何防止這種情況發生？我使用 MongoDb 作為資料庫以及服務器端的 Nodejs Expressjs 請你們幫我找出我的錯誤并糾正它非常感謝！

登錄.jsx

import { useState } from "react";
import styled from "styled-components";
import { login } from "../redux/apiCalls";
import { mobile } from "../responsive";
import { useDispatch, useSelector } from "react-redux";

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url("https://images.unsplash.com/photo-1627281796892-39e266ee50be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1827&q=80")
      center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  a {
    color: #FFF;
    text-decoration: none;
  }
`;

const Wrapper = styled.div`
  width: 25%;
  padding: 20px;
  border-radius: 5px;
  background-color: black;
  
`;

const Title = styled.h1`
  font-size: 24px;
  font-weight: 300;
  color: white;
`;

const Form = styled.form`
  display: flex;
  flex-direction: column;
`;

const Input = styled.input`
  flex: 1;
  min-width: 40%;
  margin: 10px 0;
  padding: 10px;
  border:none;
  border-bottom: 1px solid red;
  background-color: black;
  color: white;
`;

const Button = styled.button`
  width: 40%;
  border: none;
  padding: 15px 20px;
  background-color: red;
  color: white;
  cursor: pointer;
  margin-bottom: 10px;
  border-radius: 5px;
  &:disabled {
    color: green;
    cursor: not-allowed;
  }
`;

const Link = styled.a`
  margin: 5px 0px;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  color: white;
`;

const Error = styled.span`
  color: white;
`;


const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const dispatch = useDispatch();
  const { isFetching, error } = useSelector((state) => state.user);

  const handleClick = (e) => {
    e.preventDefault();
    login(dispatch, { username, password });
  };
  return (
    <Container>
      <Wrapper>
        <Title>SIGN IN</Title>
        <Form>
          <Input
            placeholder="username"
            onChange={(e) => setUsername(e.target.value)}
          />
          <Input
            placeholder="password"
            type="password"
            onChange={(e) => setPassword(e.target.value)}
          />
          <Button onClick={handleClick} disabled={isFetching}>
            LOGIN
          </Button>
          {/*error && <Error>Something went wrong...</Error>*/}
          <Link>DO NOT YOU REMEMBER THE PASSWORD?</Link>
          <Link>CREATE A NEW ACCOUNT</Link>
        </Form>
      </Wrapper>
    </Container>
  );
};

export default Login;

服務器端

auth.js

const router = require("express").Router();
const User = require("../models/User");
const CryptoJS = require("crypto-js");
const jwt = require("jsonwebtoken");

//REGISTER
router.post("/register", async (req, res) => {
  const newUser = new User({
    username: req.body.username,
    email: req.body.email,
    password: CryptoJS.AES.encrypt(
      req.body.password,
      process.env.PASS_SEC
    ).toString(),
  });

  try {
    const savedUser = await newUser.save();
    res.status(201).json(savedUser);
  } catch (err) {
    res.status(500).json(err);
  }
});

//LOGIN

router.post("/login", async (req, res) => {
  try {
    const user = await User.findOne({ username: req.body.username });
    !user && res.status(401).json("Wrong credentials!");

    const hashedPassword = CryptoJS.AES.decrypt(
      user.password,
      process.env.PASS_SEC
    );
    const OriginalPassword = hashedPassword.toString(CryptoJS.enc.Utf8);

    OriginalPassword !== req.body.password &&
      res.status(401).json("Wrong credentials!");

    const accessToken = jwt.sign(
      {
        id: user._id,
        isAdmin: user.isAdmin,
      },
      process.env.JWT_SEC,
      {expiresIn:"3d"}
    );

    const { password, ...others } = user._doc;

    res.status(200).json({...others, accessToken});
  } catch (err) {
    res.status(500).json(err);
  }
});

module.exports = router;

MongoDB資料庫代碼

用戶.js

const mongoose = require("mongoose")

const UserSchema = new mongoose.Schema(
    {
        username: { type: String, required: true, unique: true },
        email: { type: String, required: true, unique: true },
        password: { type: String, required: true },
        isAdmin: {
            type: Boolean,
            default: false,
          },
        },
        { timestamps: true }
      );
      
      module.exports = mongoose.model("User", UserSchema);

uj5u.com熱心網友回復：

const user = await User.findOne({ username: req.body.username });

// sends wrong credentials status here
!user && res.status(401).json("Wrong credentials!");

// but it still proceeds forward

當它繼續前進時，它會嘗試再次發送狀態，即使它之前已經發送過。它會在嘗試設定標頭兩次時崩潰。所以，我們需要在它設定標題的任何時候回傳它

if (!user) return res.status(401).json("Wrong credentials!");

應該這樣做：

OriginalPassword !== req.body.password && res.status(401).json("Wrong credentials!");

只要確保你所有的路線只設定一次標題。也就是說，res.status().json();只呼叫一次。

標籤：javascript 节点.js 表示 jwt 梅尔

上一篇：如何使用索引號而不是物件的id路由到各個頁面？

下一篇：無法將模型連接到Prisma上的另一個模型