Javascript Node.js express登录并将表单注册为选项卡

Javascript Node.js express登录并将表单注册为选项卡,javascript,node.js,Javascript,Node.js,我目前正在尝试创建一个node.js身份验证站点,它将登录和注册表单存储在单独的选项卡中 我曾经有两个不同的网站,用来管理登录和注册。因此,我的user.js文件如下所示: var express = require('express'); var router = express.Router(); var passport = require('passport'); var LocalStrategy = require('passport-local').Strategy; var U

我目前正在尝试创建一个node.js身份验证站点,它将登录和注册表单存储在单独的选项卡中

我曾经有两个不同的网站,用来管理登录和注册。因此,我的user.js文件如下所示:

var express = require('express');
var router = express.Router();
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;

var User = require('../models/user');

// Register
router.get('/register', function(req, res){
    res.render('register');
});

// Login
router.get('/authenticate', function(req, res){
    res.render('authenticate');
});

// Register User
router.post('/register', function(req, res){
    var name = req.body.name;
    var username = req.body.username;
    var gender = req.body.gender;
    var email = req.body.email;
    var password = req.body.password;
    var password2 = req.body.password2;

    // Validation
    req.checkBody('name', 'Name is required').notEmpty();
    req.checkBody('username', 'Username is required').notEmpty();
    req.checkBody('gender', 'Gender is required').notEmpty();
    req.checkBody('email', 'Email is not valid').isEmail();
    req.checkBody('email', 'Email is required').notEmpty();
    req.checkBody('password', 'Password is required').notEmpty();
    req.checkBody('password2', 'Passwords do not match').equals(req.body.password);

    var errors = req.validationErrors();

    if(errors)
    {
        res.render('register', {
            errors: errors
        });
    }
    else
    {
        var newUser = new User({
            name: name,
            username: username,
            gender: gender,
            email: email,
            password: password
        });

        User.createUser(newUser, function(err, user)
        {
            if(err) throw err;
            console.log(user);
        });

        req.flash('success_msg', 'Success: You are registered and you can login.');

        res.redirect('/users/authenticate');
    }
});

passport.use(new LocalStrategy(
    function(username, password, done)
    {
        User.getUserByUsername(username, function(err, user)
        {
            if(err) throw err;
            if(!user)
            {
                return done(null, false, {message: 'Error: Unknown User.'});
            }

            User.comparePassword(password, user.password, function(err, isMatch)
            {
                if(err) throw err;
                if(isMatch)
                {
                    return done(null, user);
                }
                else
                {
                    return done(null, false, {message: 'Error: Invalid Password.'});
                }
            })
        });
    })
);

passport.serializeUser(function(user, done)
{
    done(null, user.id);
});

passport.deserializeUser(function(id, done)
{
    User.getUserById(id, function(err, user)
    {
        done(err, user);
    })
})

router.post('/authenticate',
    passport.authenticate('local', {successRedirect: '/', failureRedirect: '/users/authenticate', failureFlash: true}),
    function(req, res)
    {
        res.redirect('/');
    }
);

router.get('/logout', function(req, res){
    req.logout();
    req.flash('success_msg', 'Success: You are logged out.');
    res.redirect('/users/authenticate');
});

module.exports = router;
但是我有点困惑,既然认证站点现在将登录/注册存储在选项卡中,那么现在如何处理表单post

选项卡的Html格式:

<!-- Tabbed form -->
<div class="tabbable panel login-form width-400">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#basic-tab1" data-toggle="tab"><h6 class="text-semibold">Sign in</h6></a></li>
        <li><a href="#basic-tab2" data-toggle="tab"><h6 class="text-semibold">Register</h6></a></li>
    </ul>

    <div class="tab-content panel-body">
        <div class="tab-pane fade in active" id="basic-tab1">
            <form method="post" action="/users/authenticate">
                <input type="hidden" name="method" value="login">

                <div class="text-center">
                    <div class="icon-object border-slate-300 text-slate-300"><i class="icon-reading"></i></div>
                    <h5 class="content-group">Login to your account <small class="display-block">Your credentials</small></h5>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="text" class="form-control" placeholder="Username" name="username">
                    <div class="form-control-feedback">
                        <i class="icon-user text-muted"></i>
                    </div>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="password" class="form-control" placeholder="Password" name="password">
                    <div class="form-control-feedback">
                        <i class="icon-lock2 text-muted"></i>
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn bg-danger-400 btn-block">Login</button>
                </div>
            </form>
            <span class="help-block text-center no-margin">By continuing, you're confirming that you've read our Conditions</span>
        </div>

        <div class="tab-pane fade" id="basic-tab2">
            <form method="post" action="/users/authenticate">
                <input type="hidden" name="method" value="register">

                <div class="text-center">
                    <div class="icon-object border-slate-300 text-slate-300"><i class="icon-plus3"></i></div>
                    <h5 class="content-group">Create new account <small class="display-block">All fields are required</small></h5>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="text" class="form-control" name="usernameRegister" placeholder="Your username">
                    <div class="form-control-feedback">
                        <i class="icon-user-check text-muted"></i>
                    </div>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="password" class="form-control" name="passwordRegister" placeholder="Create password">
                    <div class="form-control-feedback">
                        <i class="icon-user-lock text-muted"></i>
                    </div>
                </div>

                <div class="form-group has-feedback has-feedback-left">
                    <input type="text" class="form-control" name="emailRegister" placeholder="Your email">
                    <div class="form-control-feedback">
                        <i class="icon-mention text-muted"></i>
                    </div>
                </div>

                <button type="submit" class="btn bg-danger-400 btn-block">Register</button>

                </br>
                <span class="help-block text-center no-margin">By continuing, you're confirming that you've read our Conditions</span>
            </form>
        </div>
    </div>
</div>
<!-- /tabbed form -->

登录到您的帐户以获取您的凭据 登录 通过继续,您确认您已经阅读了我们的条件 创建新帐户所有字段都是必需的 登记
通过继续,您确认您已经阅读了我们的条件
选项卡式表单的屏幕截图:

如何处理身份验证表单中的已发布值?我认为我可以再发送两个隐藏输入来存储一个值,比如register和login,以便在javascript中使用它们,但我没有让它也起作用


因此,如果我更改了注册路由器以进行身份验证,我的代码将不知道我是否发布了登录名或注册名。

对于选项卡中的表单,只需让每个表单向不同的路径发送一条帖子,您就不需要任何隐藏字段来区分注册名和登录名

登入表格:

<form method="post" action="/users/authenticate">
...
</form>

...
登记表格:

<form method="post" action="/register">
...
</form>

...
在注册控制器中,创建新用户后,可以调用passport的authenticate方法对用户进行身份验证,然后可以重定向到任何需要的位置。但不需要重定向到验证路由