En este artículo, le muestro cómo redirigir a los usuarios usando ExpressJS. En primer lugar, ¿cuándo quieres redirigir al usuario? Aquí hay algunos escenarios reales.
Por ejemplo, cuando el usuario inicia sesión correctamente, puede redirigirlo al tablero. En otro caso, cuando el usuario solicita restablecer la contraseña, generalmente generamos una URL con el hash de la contraseña anterior del usuario y la enviamos al correo electrónico del usuario. Aquí, le muestro cómo redirigir al usuario al panel después de iniciar sesión correctamente.
Visión general:
Cliente: Realice una solicitud GET en la URL ‘/’ para la página de inicio de sesión.
Servidor: Procesar página de inicio de sesión
Cliente: A continuación, el usuario completa los datos del formulario y realiza una solicitud POST en la URL ‘/login’ .
Servidor: si los datos del usuario coinciden, redirija a ‘/dashboaard/[ CORREO ELECTRÓNICO DEL USUARIO ]’.
Cliente: el usuario realiza una solicitud GET en ‘/dashboaard/[ CORREO ELECTRÓNICO DEL USUARIO ]’ .
Servidor: renderizar la página del tablero.
Estructura del proyecto: la estructura final del directorio del proyecto se verá así.
Project | |-> node_modules |-> views |-> login.ejs |-> dashboard.ejs |-> package.json |-> package-lock.json |-> server.js
Paso 1: Cree una carpeta de proyecto npm vacía y asígnele el nombre Project .
mkdir Project cd Project npm init -y
Paso 2: Instalar requiere dependencia.
Requerir dependencia:
- ExpressJS
- EJS
- analizador de cuerpo
npm i express ejs body-parser
Paso 3: archivos de cliente, el comportamiento predeterminado de EJS es que busca en la carpeta ‘vistas’ las plantillas para representar. Entonces, hagamos una carpeta de ‘vistas’ en nuestra carpeta de proyecto de Node principal y hagamos dos archivos llamados » login.ejs » y » dashboard.ejs «.
login.js es responsable de la solicitud de inicio de sesión del usuario y, si el inicio de sesión es exitoso, el usuario lo redirigirá a dashboard.ejs .
login.ejs
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
margin: 0% auto;
}
h1{
color: green;
}
input{
margin: 10px;
display: block;
padding: 5px 10px;
}
button{
margin: 10px;
display: block;
padding: 5px 10px;
cursor: pointer;
background-color: green;
border: none;
color: white;
font-weight: bold;
}
form{
margin: 10% auto;
padding: 20px;
width: 20%;
border: 1px solid green;
}
</style>
</head>
<body>
<form>
<center><h1>GeeksForGeeks</h1></center>
<label>Email</label>
<input type="email" id="userEmail">
<label>Password</label>
<input type="password" id="userPassword">
<button onClick = "login(event)"> Login </button>
</form>
<script>
const login = e =>{
e.preventDefault();
const email = document.getElementById('userEmail').value;
const password = document.getElementById('userPassword').value;
const option = {
headers:{
"Content-Type": "application/json"
},
method: "POST",
body: JSON.stringify({
email: email,
password: password
}),
redirect: "follow"
}
// fetching data
fetch(`<%= url %>`, option)
.then(res => res.redirected && ( location.href = res.url ))
.catch(err => alert('Something happen wrong!'));
}
</script>
</body>
</html>
dashboard.ejs
<!DOCTYPE html> <html> <head> <title>Dashboard</title> </head> <body> <h1>Welcome <%= email %></h1> </body> </html>
Paso 4: Cree un nombre de archivo server.js en su carpeta raíz. Este archivo tiene algún middleware y responde a la solicitud del usuario. Por lo general, la información de inicio de sesión del usuario se obtiene de la base de datos, pero en nuestro caso es justo obtenerla de una base de datos damy.
Aquí, la ruta del controlador de inicio de sesión se redirige a ‘/dashboaard/[ CORREO ELECTRÓNICO DEL USUARIO ]’ si los datos del usuario coinciden con la respuesta con el código de error de cliente HTTP 401.
server.js
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const ejs = require('ejs');
const app = express();
const PORT = 3000;
app.set('view engine', 'ejs');
app.use(bodyParser.json());
//login page route
app.get('/', (req,res)=>{
res.render(path.join(__dirname, 'views/login.ejs'), {url: '/login'});
})
// login handler route
app.post('/login', (req,res)=>{
const {email, password} = req.body;
findUser(email, password) ?
// if user is registered
// generate a dynamic url
// redirect to user
res.redirect(301, `/dashboard/${email}`) :
res.status(401).end();
});
// dashboard route
app.get('/dashboard/:email', (req, res)=>{
const {email} = req.params;
res.render(path.join(__dirname, 'views/dashboard.ejs'), {email: email})
});
// damy user db
const users = [
{
name: "Raktim Banerjee",
email: "raktim@email.com",
password: "Raktim"
},
{
name: "Arpita Banerjee",
email: "arpita@email.com",
password :"Arpita"
}
];
// find user
const findUser = (email, password)=> users.some(user =>
user.email === email && user.password === password
)
// Start the server
app.listen(PORT, err =>{
err ?
console.log("Error in server setup") :
console.log("Server listening on Port", PORT)
});
Paso 5: Inicie el servidor.
node server.js
Producción:
