使用控制器$ routeProvider解决登录 [英] Resolve login in $routeProvider using controller

问题描述

我试图限制用户到接入/主题视图和 /问题视图。我主页上的登录表单。我HomeCtrl具有以下登录功能：

I'm trying to restrict a user's access to a /topics view and a /question view. I have a login form on the home page. My HomeCtrl has the following login function:

$scope.doLogin = function() {
        var user = {
            username: $scope.username,
            password: $scope.password
        }
        $http.post('data/user/users.json',
            user
        ).success(function(data, status, headers, config) {
            userService.isAuthenticated = true;
            userService.username = data.username;
            userService.password = data.password;
            $location.path('/topics');
            console.log('Yay! You logged in.')
        }).error(function(data, status, headers, config) {
            userService.isAuthenticated = false;
            userService.username = '';
            userService.password = '';
            $scope.errorMessage = 'Failed to log in. Please check username and password.'
        });

    }

和我有一个工厂设置处理数据的当前状态：

And I have a factory set up to handle the current state of the data:

angular.module('myApp.userService', []).
factory('userService', function() {
    var credentials = {
        username: '',
        password: '',
        isAuthenticated: false
    };

    return credentials;

});

这是我的$ routeProvider：

And this is my $routeProvider:

config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    }).
    when('/topics', {
        templateUrl: 'partials/topics.html', 
        controller: 'TopicCtrl',
      //resolve: isAuthenticated
    }).
    when('/question', {
        templateUrl: 'partials/question.html',
        controller: 'QuestionCtrl',
      //resolve: isAuthenticated
    }).
    when('/terms', {
      templateUrl: 'partials/terms.html',
      controller: 'TermsCtrl'
    }).
    otherwise({
        redirectTo: '/'
    });
}]);

我试过设置类似下面的决心：

I've tried setting up a resolve like the following:

resolve: {
    doLogin: HomeCtrl.doLogin
  }

但是，返回以下错误：

But that returns the following error:

未能实例化模块对myApp由于：的ReferenceError：HomeCtrl是
  没有定义的
      在http：//本地主机/ 2014年2月10日/应用/ JS / app.js：33：18
      在Object.d [如调用]

Failed to instantiate module myApp due to: ReferenceError: HomeCtrl is not defined at http:// localhost/2014-02-10/app/js/app.js:33:18 at Object.d [as invoke]

任何帮助是极大AP preciated - 我一直在找这个整天和它的驾驶我疯了。

Any help is greatly appreciated - I've been looking at this all day and it's driving me mad.

推荐答案

忽略错误，这不会是解决这个问题的正确道路，因为你不能公开的HomeController如你所想，而不是与每一个依赖（如$范围）设置正确。

Ignoring the error, this would not be a correct way to solve this problem as you cannot expose HomeController as you are thinking and not with every dependency (like $scope) setup correctly.

您可以尝试捕捉$ locationChangeStart，在某些控制器在 NG-视图之外定义或运行阻止，限制登录用户

You can try to capture $locationChangeStart, in some controller that is defined outside the ng-view or use the run block to restrict to login user

app.run(function($location, $rootScope, $route, userService) {
  $rootScope.$on('$locationChangeStart', function(evt, next, current) {
    var nextPath = $location.path(),
      nextRoute = $route.routes[nextPath];
    if (nextRoute && nextRoute.auth && !loggedIn) {
      $location.path("/home");
    }
  });
});

另外的路线应该被定义为

Also the routes should be be defined as

 when('/topics', {
        templateUrl: 'partials/topics.html', 
        controller: 'TopicCtrl',
        auth: true
    })

请参阅此<一个href=\"http://stackoverflow.com/questions/20718945/angularjs-authentication-issue-with-query-parameter\">SO后和 plunkr 得到一个想法。

See this SO post and the plunkr to get a idea.

这篇关于使用控制器$ routeProvider解决登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！