输入正确邮箱和密码仍无法登录的认证问题求助

问题概述 #

使用已注册的邮箱和密码尝试登录系统时始终失败，本地调试（VS Code）未发现代码错误，浏览器控制台也无报错信息。以下是关键代码：

前端登录组件（Entrar.js） #

import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import styles from './Entrar.module.css';

const Entrar = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      navigate('/');
    }
  }, [navigate]);

  const [dados, setDados] = useState({
    email: '',
    senha: '',
  });

  const [erro, setErro] = useState("");

  const handleMudar = ({ currentTarget: input }) => {
    setDados({ ...dados, [input.name]: input.value });
  };

  const handleEnviar = async (e) => {
    e.preventDefault();
    try {
      const url = 'http://localhost:5555/autenticar';
      const { data: resultado } = await axios.post(url, dados);
      localStorage.setItem('token', resultado.token);
      window.location = "/";
    } catch (erro) {
      if (
        erro.response && erro.response.status >= 400 &&
        erro.response.status <= 500
      ) {
        setErro(erro.response.data.message);
      }
    }
  }

  return (
    <div className={styles.entrar_container}>
      <div className={styles.entrar}>
        <div className={styles.left}>
          <form onSubmit={handleEnviar} className={styles.form}>
            <h1>Entrar</h1>
            <input
              type="email"
              placeholder="Email"
              name='email'
              onChange={handleMudar}
              value={dados.email}
              required
              className={styles.input}
            />
            <input
              type="password"
              placeholder="Senha"
              name='senha' // Changed to 'senha' from 'password'
              onChange={handleMudar}
              value={dados.senha}
              required
              className={styles.input}
            />
            {erro && <div className={styles.erro_msg}>{erro}</div>}
            <div className={styles.button_container}>
              <button type="submit" className={styles.entrar_btn}>
                Entrar
              </button>
              <Link to="/entrar/cadastrar">
              <button className={styles.novo_aqui_btn}>
                Novo Aqui?
              </button>
              </Link>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Entrar;

后端认证路由（autenticarRotas.js） #

/* Importa os módulos necessários */
const express = require('express');
const { Usuario }  = require('../models/usuario');
const Joi = require('joi');
const bcrypt = require('bcrypt');

const autenticarRotas = express.Router();

autenticarRotas.post('/', async (request, response) => {
    try {
        const { error } = validar(request.body);
        if (error) 
                return response.status(400).send(error.details[0].message);
        
        /* Verifies if exist a user with the email */
        const usuario = await Usuario.findOne({ email: request.body.email });
        /* if doesn't exist returns a message */
        if (!usuario) 
                return response.status(400).send({ message: "Usuário não encontrado" });
        
        /* Verifies if the password or email is correct */
        const senhaValida = await bcrypt.compare(
            request.body.senha, usuario.senha
        );
        if (!senhaValida) 
                return response.status(400).send({ message: "Senha ou email incorreto" });

        const token = usuario.generateAuthToken();
        response.status(200).send({ dados: token, message: "Login efetuado com sucesso" });
    } catch (error) {
        return response.status(500).send({ message: "Erro interno do servidor (autetica rota)" });
    }
});

/* Cria um validação de dados usando joi*/
const validar = (dados) => {
    const schema = Joi.object({
        email: Joi.string().email().required().label("Email"),
        senha: Joi.string().required().label("Senha"),
    });
    return schema.validate(dados);
};

/* Exporta a route */
module.exports = autenticarRotas;

核心问题与修复方案 #

1. 前端未导入axios #

代码中使用了axios.post但未导入axios模块，导致请求无法发起，且无报错提示（若未全局引入axios）。
修复：在Entrar.js顶部添加导入语句：

import axios from 'axios';

2. 前后端token字段不匹配 #

后端返回的token存储在dados字段中，前端却尝试读取resultado.token，导致无法获取并存储token，登录后跳转逻辑失效。
修复：修改前端存储token的代码：

// 原代码
// localStorage.setItem('token', resultado.token);
// 修改为
localStorage.setItem('token', resultado.dados);

3. 跳转方式不合理 #

使用window.location = "/"会强制刷新页面，不符合React单页应用的路由逻辑，且可能导致状态丢失。
修复：改用react-router的navigate方法：

// 原代码
// window.location = "/";
// 修改为
navigate('/');

4. 错误处理不完整 #

当前仅处理400-500状态码的响应错误，网络请求失败、跨域等场景无错误提示，难以排查问题。
修复：补充错误处理逻辑：

catch (erro) {
  if (
    erro.response && erro.response.status >= 400 &&
    erro.response.status <= 500
  ) {
    setErro(erro.response.data.message);
  } else {
    setErro("登录请求失败，请检查网络或查看控制台");
    console.error("登录错误详情:", erro); // 打印错误到控制台辅助排查
  }
}

5. 跨域问题排查 #

前端（通常端口3000）与后端（端口5555）端口不同，若未配置CORS，浏览器会拦截请求，部分场景下控制台无明显报错。
修复：后端安装并配置cors：

npm install cors

在后端主文件中添加：

const cors = require('cors');
app.use(cors());

内容的提问来源于stack exchange，提问作者programmerlearner