Question

我有一个问题。我正在使用大学项目的Login API。所以这是事情。我有一个用户可以输入电子邮件地址和密码的表格，我想要的是：如果答案是正确的，即状态为200，它将把我重定向到项目中的另一个HTML文档，在这种情况下，该文档称为“ home.html”。因此，我从客户端检查了响应是否正确，并且数据成功传输，但是尽管我阅读了几篇文章，但无法给出解决方案。我将附加HTML代码，JS（前端）（我正在使用Vainilla JS），带有Express的NodeJS服务器以及POST请求的代码。

HTML表单

        <form action="/user/login" method="POST" id="form"> 
        <div class="form-group">
          <label for="email" class="etiqueta">E-Mail</label>
          <input type="emai" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Ingresa tu Email" required>
        </div>
        <div class="form-group">
          <label for="password" class="etiqueta">Contraseña</label>
          <input type="password" class="form-control" id="password" placeholder="Contraseña" required>
        </div>
        <br>
        <button type="submit" id="boton-inicia" class="btn btn-primary">Inicia Sesion</button>
      </form>

JS Front

    // Funcion de envio
iniciaSesion = (e) => {
    e.preventDefault();

    // Declaro la constante
    const host = 'http://localhost:3000/user/login';

    // Declaro una constante que va a obtener los valores de los inputs
    const form = {
        email: document.getElementById("email").value,
        password: document.getElementById("password").value
    };

    if (form.email === '', form.password === ''){
        UI.mostrarAlerta('Por favor, ingrese todos los datos', 'danger');
    } else { 
        // Declaro su end-point, metodo + envio en JSON
        fetch(host, {
        method: 'POST',
        body: JSON.stringify(form),
        headers: {
            'Content-type': 'application/json'
        }
        }).then((response) => {
            // console.log(response);
            return response.text();
        }).then((info) => {
            const json = JSON.parse(info)
            // console.log(json);
        }).catch((error) => {
            console.error(error);
        })
    }
};

// Llamo al boton y le agrego su evento y defino la funcion
document.getElementById("boton-inicia").addEventListener('click', iniciaSesion);

节点/ Express服务器

// Modulos requeridos
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const connectWithMongo = require("./config/db"); // Llamo a la configuracion de conexion a la DB
const user = require("./routes/user"); // Llamo al modelo de usuarios

// Inicios
connectWithMongo();
const app = express();
const publicDirectory = path.join(__dirname, "../public/");

// Declaro puerto para el servidor 
const PORT = process.env.PORT || 3000; 

//Middleware
app.use(express.static(publicDirectory));
app.use(bodyParser.json());
app.use(express.urlencoded({extended: true}));
app.use(express.json());

// Con esta peticion, chequeo que la API este funcionando
app.get("/", (req,res) => {
    res.json({
        message: "Api Running"
    });
});

app.use("/user", user);

app.listen(PORT, (req,res) => {
    console.log(`Server iniciado en puerto ${PORT}`);
});

POST方法

router.post("/login", [
    // Le indico los inputs a chequear
     check("email", "Por favor, ingrese un email").isEmail(),
     check("password", "Por favor, ingrese una contraseña").isLength({min: 6})
 ], async (req, res) => {
    // Requiero la data
    const { email, password } = req.body;

    try {
        // Declaro en una variable que busque a un usuario por email si existe
        let user = await User.findOne({
            email
        });

        // Declaro que, si el email es distinto, devuelva un mensaje
        if (!user)
        return res.status(401).json ({
            message: "Usuario no existe"
        });

        // Constante que va a comparar email con contraseña
        const esIgual = await bcrypt.compare(password, user.password);

        // Declaro que, si el email es distinto, devuelva un mensaje
        if (!esIgual)
        return res.status(401).json({
            message: "Contraseña no coincide"
        });

        const payload = {
            user: {
                id: user.id
            }
        };

        jwt.sign(payload,"randomString", {
            expiresIn: 10000
        }, (err, token) => {
                if (err) throw err;
                res.status(200).json({
                    token
                });
            }
        );
    } catch (e) {
        console.log(e);
        res.status(500).json({
            message: "Error de servidor"
        });
    }
 });

谢谢大家！

PD：我正在从浏览器的控制台附加一个标题，您可以在其中看到，我具有身份验证和响应状态中的令牌。 Click here to see it !

Answer 1

由于您是通过JavaScript提交表单的，因此您可以在成功调用后使用window.location.replace()：

fetch(host, {
  method: 'POST',
  body: JSON.stringify(form), 
  headers: { 'Content-type': 'application/json' }
}).then((response) => {
  // console.log(response);
  return response.text();
}).then((info) => {
  const json = JSON.parse(info)
   window.location.replace("/home.html"); // <= HERE
  // console.log(json);
}).catch((error) => {
  console.error(error);
})

此外，您无需进行json和text()就可以直接阅读JSON.parse响应：

fetch(host, {
  method: 'POST',
  body: JSON.stringify(form),
  headers: { 'Content-type': 'application/json' }
})
.then(response => response.json())
.then(json => {
   // do stuff with `json` body
   window.location.replace("/home.html"); // <= HERE
})
.catch(console.error)

POST请求后重定向到另一个HTML文档

1 个答案: