如何使用 ExpressJS 重定向到生成的 URL？

在本文中，我将向您展示如何使用 ExpressJS 重定向用户。首先，什么时候要重定向用户？这是一些真实的场景。

例如，当用户成功登录时，您可以将他重定向到仪表板。另一个例子，当用户请求重置密码时，通常我们会生成一个带有用户旧密码哈希的 URL 并发送到用户的电子邮件。在这里，我将向您展示成功登录后如何将用户重定向到仪表板。

概述：

Client: Make a GET request on URL ‘/’ for login page.
Server: Render login page
Client: Next, user fill the form data and make a POST request on URL ‘/login’.
Server: If user data matched then redirect to ‘/dashboaard/[ USER EMAIL ]’.
Client: User make GET request  on ‘/dashboaard/[ USER EMAIL ]’.
Server: Render dashboard page.

项目结构：最终的项目目录结构将如下所示。

Project
|
|-> node_modules
|-> views
  |-> login.ejs
  |-> dashboard.ejs
|-> package.json
|-> package-lock.json
|-> server.js

第 1 步：创建空的 npm 项目文件夹并将其命名为Project 。

mkdir Project
cd Project 
npm init -y

第二步：安装require依赖。

需要依赖：

1. ExpressJS
2. EJS
3. 正文解析器

npm i express ejs body-parser

第 3 步：客户端文件，EJS 的默认行为是查看“views”文件夹以获取要呈现的模板。所以，让我们在我们的主节点项目文件夹中创建一个“views”文件夹，并创建两个名为“ login.ejs ”和“ dashboard.ejs ”的文件。

login.js负责用户登录请求，如果登录成功，用户将重定向到dashboard.ejs 。

login.ejs

    
    
        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;
        }
    


    
        GeeksForGeeks
  
        Email
        
  
        Password
        
  
         Login 
    
  
    
        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!'));
        }
    

仪表板.ejs

    


    
Welcome <%= email %>

第 4 步：在您的根文件夹中创建一个文件名server.js 。这个文件有一些中间件，它响应用户请求。通常用户登录信息是从数据库中获取的，但对于我们的例子来说，从数据库中获取它是公平的。

在这里，如果用户数据与 HTTP 客户端错误代码 401 的 else 响应匹配，则登录处理程序路由将重定向到“/dashboard/[ USER EMAIL]” 。  

服务器.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: "[e-mail]",
        password: "Raktim"
    },
    {
        name: "Arpita Banerjee",
        email: "[e-mail]",
        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)
});

第五步：启动服务器。

node server.js

输出：