如何将终端用户登录到我的单页应用程序,并将其重定向到该单页应用程序?

3
如何使用Backbone.js、Express.js和passport.js将终端用户登录我的单页应用程序并将其重定向到单页应用程序?
我已经在我的应用程序中使passport、mongo.db、express和backbone都正常工作。然而,在成功登录后,我希望加载单页的backbone js web应用程序。目前的情况是,我已经使登录系统正常工作。但是,当我尝试重定向用户到应用程序时,它会立即重定向回登录页面。我已经使用控制台日志确保服务器端的登录代码没有问题,一切都正常工作。奇怪的是,当我打开Chrome开发人员工具并查看标题和响应时,我收到了正确的索引页面返回,但它没有在浏览器中加载,并且Url仍然是http://localhost:3000/login。
这是我怀疑必须成为罪魁祸首的代码:
请注意,public/index.html和ejs index实质上是相同的文件。我最初让整个应用程序在客户端加载,但现在我正在尝试将主index.html文件移动到服务器端,以便可以受到密码保护。
如果有任何问题可以帮助我更好地解释这个问题,或者有更多的代码想要看到,请告诉我。我真的很想解决这个问题。
编辑:正如您在浏览器中看到的这张截图,我只有一个简单的表格。当提交该表格时,我确实在响应中获取了所需的页面,但它没有在浏览器中加载。控制台中还会出现“无法加载资源”的错误,但是由于某些原因它无法加载/login,即使我试图加载index。
编辑#2:尽管我不想粘贴无休止的代码块,但我认为解决此问题的唯一方法就是粘贴无休止的代码块。所以这里是server.js的全部内容-减去了一些不相关的api路由部分:
var express = require('express')
  , http = require('http')
  , passport = require('passport')
  , LocalStrategy = require('passport-local').Strategy
  , bcrypt = require('bcrypt')
  , SALT_WORK_FACTOR = 10
  , mongoose = require('mongoose')
  , path = require('path');

var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);
server.listen(3000);

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.engine('ejs', require('ejs-locals'));
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.cookieParser('your secret here'));
  app.use(express.session());
  app.use(passport.initialize());
  app.use(passport.session());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
    app.use( express.errorHandler({ dumpExceptions: true, showStack: true }));
});

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

//Connect to database
var db = mongoose.connect( 'mongodb://localhost/attorneyapp' );

/*
|-------------------------------------------------------------------------------
| Schemas
|-------------------------------------------------------------------------------
*/
var userSchema = mongoose.Schema({
  username: { type: String, required: true, unique: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true},
});
// Bcrypt middleware
userSchema.pre('save', function(next) {
    var user = this;

    if(!user.isModified('password')) return next();

    bcrypt.genSalt(SALT_WORK_FACTOR, function(err, salt) {
        if(err) return next(err);

        bcrypt.hash(user.password, salt, function(err, hash) {
            if(err) return next(err);
            user.password = hash;
            next();
        });
    });
});
// Password verification
userSchema.methods.comparePassword = function(candidatePassword, cb) {
    bcrypt.compare(candidatePassword, this.password, function(err, isMatch) {
        if(err) return cb(err);
        cb(null, isMatch);
    });
};
var Client = new mongoose.Schema({
    first_name: String,
    last_name: String,
    status: String,
});
var Case = new mongoose.Schema({
    case_name: String,
    status: String,
});

/*
|-------------------------------------------------------------------------------
| Models
|-------------------------------------------------------------------------------
*/
var User = mongoose.model( 'User', userSchema );
var ClientModel = mongoose.model( 'Client', Client );
var CaseModel = mongoose.model( 'Case', Case );

// Seed a user
// var user = new User({ username: 'bob', email: 'bob@example.com', password: 'secret' });
// user.save(function(err) {
//   if(err) {
//     console.log(err);
//   } else {
//     console.log('user: ' + user.username + " saved.");
//   }
// });

// Passport session setup.
//   To support persistent login sessions, Passport needs to be able to
//   serialize users into and deserialize users out of the session.  Typically,
//   this will be as simple as storing the user ID when serializing, and finding
//   the user by ID when deserializing.
passport.serializeUser(function(user, done) {
  done(null, user.id);
});

passport.deserializeUser(function(id, done) {
  User.findById(id, function (err, user) {
    done(err, user);
  });
});
// Use the LocalStrategy within Passport.
//   Strategies in passport require a `verify` function, which accept
//   credentials (in this case, a username and password), and invoke a callback
//   with a user object.  In the real world, this would query a database;
//   however, in this example we are using a baked-in set of users.
passport.use(new LocalStrategy(function(username, password, done) {
  User.findOne({ username: username }, function(err, user) {
    if (err) { 
        console.log('error: ', err);
        return done(err); 

    }
    if (!user) { 
        console.log('Unknown user ', username);  
        return done(null, false, { message: 'Unknown user ' + username }); 
    }
    user.comparePassword(password, function(err, isMatch) {
      if (err){
        console.log('error: ', err);

        return done(err);
      } 
      if(isMatch) {
        console.log('it is a match');
        return done(null, user);
      } else {
        console.log('invalid password');

        return done(null, false, { message: 'Invalid password' });
      }
    });
  });
}));
/*
|-------------------------------------------------------------------------------
| User
|-------------------------------------------------------------------------------
*/
// POST /login
//   Use passport.authenticate() as route middleware to authenticate the
//   request.  If authentication fails, the user will be redirected back to the
//   login page.  Otherwise, the primary route function function will be called,
//   which, in this example, will redirect the user to the home page.
//
//   curl -v -d "username=bob&password=secret" http://127.0.0.1:3000/login
//   
/***** This version has a problem with flash messages
app.post('/login', 
  passport.authenticate('local', { failureRedirect: '/login', failureFlash: true }),
  function(req, res) {
    res.redirect('/');
  });
*/

// POST /login
//   This is an alternative implementation that uses a custom callback to
//   acheive the same functionality.
app.get('/', function(req, res){
    console.log('base router is being called');

    // res.sendfile(__dirname + '/public/index.html');
    res.render('index');
});
app.get('/login', function(req, res) {
    return res.render('login');
});

app.post('/login', function(req, res, next) {

  passport.authenticate('local', function(err, user, info) {
    if (err) { return next(err) }
    if (!user) {
        console.log('NOT USER', info.message);

      req.session.messages =  [info.message];

      return res.redirect('/login');

    }
    req.logIn(user, function(err) {
      if (err) { return next(err); }
      console.log('YES USER is loged in');
      // return res.sendfile(__dirname + '/public/index.html');
      return res.redirect('/');


    });
  })(req, res, next);
});

app.get('/users', function(req, res){
  return User.find( function( err, users ) {
        if( !err ) {
            return res.send( users );
        } else {
            return console.log( err );
        }
    });
});

此外,不确定是否相关,但这是我的目录和文件结构。 enter image description here
1个回答

0

尝试返回空值(实际上是未定义的)。

我的意思是

res.redirect('/');
return;

而不是

return res.redirect('/');

不要在登录中使用res.render('index'res.sendfile(。它会在/login页面上向客户端响应来自index.html的数据!

我尝试过了,但仍然不起作用。不过控制台中已经没有“无法加载资源”的错误提示了。 - Scott
尝试删除代码末尾奇怪的(req, res, next);。看起来它没有任何作用。 - Ilia Sidorenko
我尝试移除代码,但是在用户通过身份验证后,'app.get('/', function(req, res)' 不再被调用。 - Scott

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接