Javascript 角度';阻止默认事件时,s路由器不工作
我正在使用Yeoman软件包中的Angular Fullstack生成器,包括Passport.js(FB、G+、Twitter) 我遇到了一个问题,在应用程序运行时的主事件Javascript 角度';阻止默认事件时,s路由器不工作,javascript,angularjs,passport.js,angular-fullstack,Javascript,Angularjs,Passport.js,Angular Fullstack,我正在使用Yeoman软件包中的Angular Fullstack生成器,包括Passport.js(FB、G+、Twitter) 我遇到了一个问题,在应用程序运行时的主事件$stageChangeStart中,$location.path('/login')的表达式什么也不做。即使它在表达式调用前后发出警报,这意味着代码安全到达那里,并且没有console.log错误 它发生在我添加了event.preventDefault()之后位置表达式之前: .run(function ($rootSc
$stageChangeStart
中,$location.path('/login')的表达式代码>什么也不做。即使它在表达式调用前后发出警报,这意味着代码安全到达那里,并且没有console.log
错误
它发生在我添加了event.preventDefault()之后代码>位置表达式之前:
.run(function ($rootScope, $location, Auth) {
// Redirect to login if route requires auth and you're not logged in
$rootScope.$on('$stateChangeStart', function (event, next) {
Auth.isLoggedInAsync(function(loggedIn) {
if (next.authenticate && !loggedIn) {
event.preventDefault();
// alerts here
$location.path('/login');
// alerts here as well
}
});
});
添加preventDefault的原因是为了尝试解决其他问题
通过NODE_ENV=development
成功登录/home后的重定向非常有效,尽管当我使用Grunt构建项目并在远程服务器上运行它时,这种特定的重定向不再有效,即使我可以在我丑陋的代码中看到对$location.path('/home')
的特定调用
我甚至在main.controller.js
中做了一个检查,以确保在用户经过身份验证后,它重定向到/home:
'use strict';
angular.module('fckyeah')
.controller('MainCtrl', function ($scope, $http, Auth, socket, $location) {
if (Auth.isLoggedIn()) {
$location.path('/home');
}
});
成功登录后,发生的重定向位于my LoginCtrl中:
'use strict';
angular.module('fckyeah')
.controller('LoginCtrl', function ($scope, Auth, $location, $window) {
$scope.user = {};
$scope.errors = {};
$scope.login = function(form) {
$scope.submitted = true;
if(form.$valid) {
Auth.login({
email: $scope.user.email,
password: $scope.user.password
})
.then( function() {
// Logged in, redirect to home
$location.path('/home');
})
.catch( function(err) {
$scope.errors.other = err.message;
});
}
};
$scope.loginOauth = function(provider) {
$window.location.href = '/auth/' + provider;
};
});
因此,当使用节点_ENV=production
运行它时,发生的情况是,在成功登录后,它重定向到/###或类似的位置,然后再重定向到“/”,这是一条“主”路径,而不是预期的“主”路径,并且只有手动尝试转到/home-works
我试图理解为什么我在不同的环境中有不同的行为,为什么preventDefault会完全停止ngRouter的运行。
如果开发环境不能在生产环境中提供相同的功能,那么依赖开发环境是很危险的
感谢您对本案例的任何建议。首先,因为您使用的是ui路由器
而不是$location.path('/login')代码>,您必须使用
$state.go("statename")
由于它非常特定于生产环境,我的最佳猜测是依赖项没有正确注入。因此,当您对代码进行丑化时,请确保使用数组表示法将函数与控制器绑定
.controller('LoginCtrl', function ($scope, Auth, $location, $window) {
一定像
.controller('LoginCtrl', ["$scope", "Auth", "$location", "$window", function ($scope, Auth, $location, $window) {
// your code here
}]);
这是为了确保正确注入所有依赖项。据我所知,有时需要使用ui路由器通过setTimeout或$timeout包装这些位置更改。看起来你混合了ui路由器和ngRouter的概念,它们是不同的东西。在使用它之前我需要注入$state
,还是在模块声明中包含ui.router
时它是全局可用的?是的,你需要注入$state
n你的运行方法做到了这一点,将所有$location
更改为$state
,同样的问题,但是随着$state
的介绍,我现在没有URL,它在“/”URL上显示我的“主页”状态。是否有一个代码笔或具有角度完整堆栈的东西,以便我可以介绍该问题?您可以在plnkr.co/jsbin.com中进行设置。我会检查并让您知道事实上,由于问题发生在Grunt构建之后,并且plnkr或jsbin不支持部署YeoMan生成器和所有NPM依赖项,我不确定我是否能够创建准确的示例。