Javascript Node.js express登录并将表单注册为选项卡
我目前正在尝试创建一个node.js身份验证站点,它将登录和注册表单存储在单独的选项卡中 我曾经有两个不同的网站,用来管理登录和注册。因此,我的user.js文件如下所示: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
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方法对用户进行身份验证,然后可以重定向到任何需要的位置。但不需要重定向到验证路由