Question

我正在尝试使用MEAN堆栈在这样的项目结构中创建用户管理（我遵循此tutorial）：

 - loginApp
    -client/
        -app/
            -images/
            ------- scripts/
            ------- styles/
            ------- views/
                ------ dashboard.html
                ------ home.html
                ------ login.html
                ------ register.html
                ------ partials/
            ------- index.html
        ---------- bower_components
        ---------- bower.json
    ----- models/
        ---------- user.js 
    ----- routes/
        ---------- index.js
        ---------- users.js
    - node_modules/ 
    - package.json 
    - app.js

问题是我在发布登录表单后无法重定向页面。单击具有正确凭据的提交按钮时，没有任何反应（控制台中没有错误）：

在客户端，有AngularJS服务

angular.module('app').factory('AuthenticationService',
  ['$q', '$timeout', '$http',
  function ($q, $timeout, $http) {

    // create user variable
    var user = null;

    // return available functions for use in the controllers
    return ({
      isLoggedIn: isLoggedIn,
      getUserStatus: getUserStatus,
      login: login,
      logout: logout,
      register: register
    });

    function isLoggedIn() {
      if(user) {
        return true;
      } else {
        return false;
      }
    }

    function getUserStatus() {
      return $http.get('/user/status')
      // handle success
      .success(function (data) {
        if(data.status){
          user = true;
        } else {
          user = false;
        }
      })
      // handle error
      .error(function (data) {
        user = false;
      });
    }

    function login(username, password) {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a post request to the server
      $http.post('/users/login',
        {username: username, password: password})
        // handle success
        .success(function (data, status) {
          if(status === 200 && data.status){
            user = true;
            deferred.resolve();
          } else {
            user = false;
            deferred.reject();
          }
        })
        // handle error
        .error(function (data) {
          user = false;
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

    function logout() {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a get request to the server
      $http.get('/user/logout')
        // handle success
        .success(function (data) {
          user = false;
          deferred.resolve();
        })
        // handle error
        .error(function (data) {
          user = false;
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

    function register(username, password) {

      // create a new instance of deferred
      var deferred = $q.defer();

      // send a post request to the server
      $http.post('/user/register',
        {username: username, password: password})
        // handle success
        .success(function (data, status) {
          if(status === 200 && data.status){
            deferred.resolve();
          } else {
            deferred.reject();
          }
        })
        // handle error
        .error(function (data) {
          deferred.reject();
        });

      // return promise object
      return deferred.promise;

    }

}]);

和控制器：

angular.module('app')
  .controller('LoginCtrl', ['$scope', '$location', '$state', 'AuthenticationService', function($scope, $state, $location, AuthenticationService) {

     $scope.login = function () {

      // initial values
      $scope.error = false;
      $scope.disabled = true;

      // call login from service
      AuthenticationService.login($scope.loginForm.username, $scope.loginForm.password)
        // handle success
        .then(function () {
          $location.path('/');
          $scope.disabled = false;
          $scope.loginForm = {};
          $state.go('home.dashboard');
        })
        // handle error
        .catch(function () {
          $scope.error = true;
          $scope.errorMessage = "Invalid username and/or password";
          $scope.disabled = false;
          $scope.loginForm = {};
        });

    };
  }]);

最后是HTML：

<div ng-controller="LoginCtrl" ng-cloak="" class="md-inline-form" ng-app="app">
    <form class="form" ng-submit="login()">
    <div>
        <label>Username</label>
        <input name="username" ng-model="loginForm.username">

        <label>Password</label>
        <input name="password" ng-model="loginForm.password" type="password">
    </div>
    <button type="submit">Login</button>
    </form>
</div>

在后端，有NodeJS，Express和MongoDB。

在app.js中，除了我用HTML更改了把手外，其他定义与教程相同：

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var exphbs = require('express-handlebars');
var expressValidator = require('express-validator');
var flash = require('connect-flash');
var session = require('express-session');
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;
var mongo = require('mongodb');
var mongoose = require('mongoose');
var html     = require('html');

mongoose.connect('mongodb://localhost/loginapp');
var db = mongoose.connection;

var routes = require('./routes/index');
var users = require('./routes/users');

// Init App
var app = express();

// View Engine
app.set('view engine', 'html');
app.set('views', path.join(__dirname, '/client/app/views'));
//app.engine('handlebars', exphbs({defaultLayout:'index'}));
//app.set('view engine', 'handlebars');
//app.set('views', path.join(__dirname, 'views'));

app.use('/bower_components', express.static('client/bower_components/'));

// app.engine('handlebars', exphbs({defaultLayout:'layout'}));
// app.set('view engine', 'handlebars');

// BodyParser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

// Set Static Folder
app.use(express.static(path.join(__dirname, 'client/app')));

// Express Session
app.use(session({
    secret: 'secret',
    saveUninitialized: true,
    resave: true
}));

// Passport init
app.use(passport.initialize());
app.use(passport.session());

// Express Validator
app.use(expressValidator({
  errorFormatter: function(param, msg, value) {
      var namespace = param.split('.')
      , root    = namespace.shift()
      , formParam = root;

    while(namespace.length) {
      formParam += '[' + namespace.shift() + ']';
    }
    return {
      param : formParam,
      msg   : msg,
      value : value
    };
  }
}));

// Connect Flash
app.use(flash());

// Global Vars
app.use(function (req, res, next) {
  res.locals.success_msg = req.flash('success_msg');
  res.locals.error_msg = req.flash('error_msg');
  res.locals.error = req.flash('error');
  res.locals.user = req.user || null;
  next();
});

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '../client/app', 'index.html'));
});

//app.use('/', routes);
app.use('/users', users);

// Set Port
app.set('port', (process.env.PORT || 3000));

app.listen(app.get('port'), function(){
    console.log('Server started on port '+app.get('port'));
});

在routes/users.js中，还有用于登录的get和post方法中的HTML呈现：

router.get('/login', function(req, res){
    res.sendFile(__dirname + '/login.html');
    //res.render('login');
});

router.post('/login',
  passport.authenticate('local', {successRedirect:'/', failureRedirect:'/users/login',failureFlash: true}),
  function(req, res) {
    res.sendFile(__dirname + '/home.html');
  });

我之前忘了提到当我点击登录表单上没有凭据的提交按钮时，我得到了angular.js:12011 GET http://192.168.1.39:3000/users/login 404 (Not Found)并且在服务器控制台上：

Error: ENOENT: no such file or directory, stat '/loginapp/routes/login.html'
    at Error (native)

Answer 1

如错误所示，sendFile无法找到视图文件。尝试传递正确的文件路径

router.get('/login', function(req, res){
    res.sendFile(__dirname + '/../app/views/login.html');
});

router.post('/login',
  passport.authenticate('local', {successRedirect:'/', failureRedirect:'/users/login',failureFlash: true}),
  function(req, res) {
    res.sendFile(__dirname + '/../app/views/home.html');
  });

在Express中登录后的表单后无法重定向

1 个答案: