localhost:3000/登录错误：localhost 重定向你太多次

问题描述 投票：0回答：0

一开始一切正常，然后突然间我在 localhost:3000/signin 上收到错误消息。我不知道我的代码是否有任何错误（我没有收到任何错误），但显然该页面无法正常工作。我将提供我所有的代码。

服务器.js：

if(process.env.NODE_ENV !== 'production'){
    require('dotenv').config()
}

const express = require('express');
const app = express();
const bcrypt = require('bcrypt')
const passport = require('passport')
const flash = require('express-flash')
const session = require('express-session')

const initializePassport = require('./passport-config')
initializePassport(
    passport, 
    email => users.find(user => user.email === email)
)

const users = []

app.use('/images/Taskvault.png', express.static('./images/Taskvault.png'));

app.set('view engine', 'ejs');
app.use(express.urlencoded({ extended:false }))
app.use(flash())
app.use(session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: false,
}))
app.use(passport.initialize())
app.use(passport.session())

app.get('/', (req, res) => {
  res.render('index.ejs');
});

app.get('/signup', (req, res) => {
  res.render('signup.ejs');
});

app.post('/signup', async (req, res) =>{
  try{
    const hashedPassword = await bcrypt.hash(req.body.password, 10)
    users.push({
      id: Date.now().toString(),
      name: req.body.name,
      email: req.body.email,
      password: hashedPassword
    })
    res.redirect('/signin')
  } catch{
    res.redirect('/signup')
  }
})

app.get('/signin', passport.authenticate('local',{ 
    successRedirect: '/',
    failureRedirect: '/signin',
    failureFlash: true
}))

app.post('/signin', (req, res) =>{

})

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

.环境：

SESSION_SECRET=secret

护照配置.js：

const LocalStrategy = require('passport-local').Strategy
const bcrypt = require("bcrypt")

 function initialize(passport, getUserByEmail){
    const authenticateUser = async (email, password, done) => {
        const user = getUserByEmail(email)
        if(user == null){
            return done(null, false, { message: "No user with that email" })
        }
try{
if(await bcrypt.compare(password, user.password)){
return done(null, user)
} else{
return done(null, false, { message: 'Password incorrect' })
}
} catch(e){
return done(e)
}
    }
passport.use(new LocalStrategy({ usernameField: 'email' }, authenticateUser))
passport.serializeUser((user, done) => {  })
passport.deserializeUser((id, done) => {  })
}

module.exports = initialize

index.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>TaskVault</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
            font-family: Arial, sans-serif;
        }
    
        .container {
            display: flex;
            flex-direction: row;
            height: 100vh;
        }
    
        .left {
            display: flex;
            flex: 1;
            background-color: black;
            color: white;
            align-items: center;
            justify-content: center;
            padding: 50px;
        }
    
        .right {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 50px;
        }
    
        h1 {
            font-size: 3em;
            margin-bottom: 0.5em;
        }
    
        button {
            margin-top: 1em;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 1.2em;
            cursor: pointer;
        }
    
        button#sign-up {
            background-color: yellow;
            color: white;
            
            border: none;
        }

        button#sign-up:active { /* Keep the original button style when clicked */
            background-color: yellow;
            color: white;
        }
    
        button#sign-in {
            background-color: green;
            color: white;
        }
    
        button#sign-in:active { /* Keep the original button style when clicked */
            background-color: green;
            color: white;
        }
    
        #facebook {
            background-color: #3b5998;
            color: white;
        }
    
        #facebook:active { /* Keep the original button style when clicked */
            background-color: #3b5998;
            color: white;
        }
    
        #google {
            background-color: #db4a39;
            color: white;
        }
    
        #google:active { /* Keep the original button style when clicked */
            background-color: #db4a39;
            color: white;
        }

        a{
            text-decoration: none;
            color: white;
        }
    </style>    
</head>
<body>
    <div class="container">
        <div class="left">
            <img src="/images/Taskvault.png" alt="logo" width="50%">
        </div>
        <div class="right">
            <h1>Sign up or sign in to your TaskVault account</h1>
            <button id="sign-up"><a href="./signup">Sign Up</a></button>
            <button id="sign-in"><a href="./signin">Sign In</a></button>
            <button id="facebook">Sign Up With Facebook</button>
            <button id="google">Sign Up With Google</button>
        </div>
    </div>
</body>
</html>

signin.ejs:

<h1>Sign In</h1>
<form action="/signin" method="POST">
<div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
</div>
<div>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required>
</div>
<button type="submit">Sign In</button>
</form>
<a href="/signup">Sign Up</a>
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
    }
    h1 {
        font-size: 3em;
        margin: 50px 0;
        text-align: center;
    }
    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        padding: 50px;
        margin: 0 auto;
        max-width: 500px;
    }
    div {
        margin: 10px 0;
        width: 100%;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-size: 1.2em;
        font-weight: bold;
        color: #333;
    }
    input[type="email"],
    input[type="password"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1.2em;
        width: 100%;
    }
    button[type="submit"] {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 1.2em;
        cursor: pointer;
        margin-top: 20px;
        transition: background-color 0.3s ease;
    }
    button[type="submit"]:hover {
        background-color: #0062cc;
    }
    a {
        display: block;
        margin-top: 20px;
        text-align: center;
        color: #333;
        font-size: 1.2em;
        transition: color 0.3s ease;
    }
    a:hover {
        color: #007bff;
    }
</style>

signup.ejs:

<h1>Sign Up</h1>
<form action="/signup" method="POST">
<div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
</div>
<div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
</div>
<div>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required>
</div>
<button type="submit">Sign Up</button>
</form>
<a href="/signin">Sign In</a>
<style>
    body {
        margin: 0;
        padding: 0;
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
    }
    h1 {
        font-size: 3em;
        margin: 50px 0;
        text-align: center;
    }
    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        padding: 50px;
        margin: 0 auto;
        max-width: 500px;
    }
    div {
        margin: 10px 0;
        width: 100%;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-size: 1.2em;
        font-weight: bold;
        color: #333;
    }
    input[type="email"],
    input[type="password"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1.2em;
        width: 100%;
    }
    button[type="submit"] {
        background-color: #007bff;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 1.2em;
        cursor: pointer;
        margin-top: 20px;
        transition: background-color 0.3s ease;
    }
    button[type="submit"]:hover {
        background-color: #0062cc;
    }
    a {
        display: block;
        margin-top: 20px;
        text-align: center;
        color: #333;
        font-size: 1.2em;
        transition: color 0.3s ease;
    }
    a:hover {
        color: #007bff;
    }
</style>

package.json:

{
  "name": "to-do-list",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "devStart": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.1.0",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "express-flash": "^0.0.2",
    "express-session": "^1.17.3",
    "passport": "^0.6.0",
    "passport-local": "^1.0.0"
  },
  "devDependencies": {
    "dotenv": "^16.0.3",
    "nodemon": "^2.0.22"
  }
}

.gitignore： .env 节点模块

javascript ejs .env
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.