Question

我使用Yeoman包中的Angular-Fullstack生成器，包括Passport.js（FB，G +，Twitter）

我遇到了一个问题，即在我的主要事件$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构建项目并在远程服务器上运行时，该特定重定向不再起作用，即使我可以在我的uglified代码中查看对$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');
    }
  });

成功登录后，发生的重定向位于我的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;
};
});

因此，当使用NODE_ENV=production运行它时，会发生什么，它会重定向到/＃_＃或类似的东西，然后再转移到＆＃34; /＆＃34;，＆＃34; main＆＃34 ;路线，不是＆＃34;家庭＆＃34;正如预期的那样，成功登录后，只有手动尝试进入/ home - 才能正常工作。

我试图理解为什么我在环境之间的行为有所不同，以及为什么preventDefault会使ngRouter完全停止运行。如果它无法在生产中提供相同的功能，那么依赖于您的开发环境就很危险。

感谢对此案的任何建议。

Answer 1

首先，当您使用ui-router

时

而不是$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
}]);

这是为了确保正确注入所有依赖项。

防止默认事件时，Angular的路由器无法正常工作

1 个答案: