2017-05-28 110 views
0

我目前正在嘗試創建一個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 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; 

但我有點困惑,如何處理表單提交現在的標籤,因爲身份驗證的網站商店現在登陸/註冊。

的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="https://stackoverflow.com/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="https://stackoverflow.com/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 --> 

截圖:

enter image description here

我怎麼能處理在認證形式公佈值?我以爲我可以發送2個更多的隱藏輸入來存儲一個值,比如註冊和登錄以在JavaScript內使用它們,但是我沒有得到這個工作。

所以我的代碼不知道我是否發佈登錄或註冊incase我更改了註冊路由器進行身份驗證。

回答

0

對於tab中的表單,只需讓每個表單發送POST到不同的路由,並且不需要任何隱藏字段來區分註冊和登錄。

登錄表單:

<form method="post" action="https://stackoverflow.com/users/authenticate"> 
... 
</form> 

登記表:

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

在你註冊遙控器,在創建你可以調用護照的身份驗證方法來驗證您的用戶,那麼你的新用戶可以重定向到任何你想要的地方。但不需要重定向到認證路由。