2016-10-30 56 views
0

我試圖創建一個用戶管理(按照這個tutorial)使用MEAN堆棧在項目結構是這樣的:不能重定向在快速

- 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 

,問題是,我不能發佈登錄表單後重定向頁面。 當點擊右憑證的提交按鈕,沒有任何反應(沒有控制檯錯誤): enter image description here

在客戶端有與服務

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; 

    } 

}]); 

和控制器AngularJS:

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也有對HTML渲染的GET和POST方法登錄:

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) 

回答

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'); 
    }); 
+0

我試過你建議的路徑,但仍然無法重定向http://imgur.com/XTFstGq。它似乎嘗試重定向到'user/login',儘管路徑設置爲'/../app/views/home.html' – corry

+0

服務器控制檯上是否有任何錯誤? –

+0

服務器控制檯上沒有錯誤。 – corry