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
,問題是,我不能發佈登錄表單後重定向頁面。 當點擊右憑證的提交按鈕,沒有任何反應(沒有控制檯錯誤):
在客戶端有與服務
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)
我試過你建議的路徑,但仍然無法重定向http://imgur.com/XTFstGq。它似乎嘗試重定向到'user/login',儘管路徑設置爲'/../app/views/home.html' – corry
服務器控制檯上是否有任何錯誤? –
服務器控制檯上沒有錯誤。 – corry