错误：带角度JS的[ng：areq]（教程阅读后）

时间：2015-01-03 14:35:42

标签： angularjs

我试图用角度JS创建一个身份验证系统。 我遵循本教程：https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

我修复了大部分错误，但仍有一个，我无法找到解决方案。我的代码如下：

感谢您的帮助。

app.js 

var angularMyApp = angular.module('angularMyApp', ['ngRoute']);

angularMyApp
    .constant('AUTH_EVENTS', {
        loginSuccess: 'auth-login-success',
        loginFailed: 'auth-login-failed',
        logoutSuccess: 'auth-logout-success',
        sessionTimeout: 'auth-session-timeout',
        notAuthenticated: 'auth-not-authenticated',
        notAuthorized: 'auth-not-authorized'
    })
    .constant('USER_ROLES', {
        all: '*',
        admin: 'admin',
        advertiser: 'advertiser',
        user: 'user'
    })
    .run(function ($rootScope, AUTH_EVENTS, AuthService) {
      $rootScope.$on('$routeChangeStart', function (event, next) {
        var authorizedRoles = next.resolve.authorizedRoles;
        if (!AuthService.isAuthorized(authorizedRoles)) {
          event.preventDefault();
          if (AuthService.isAuthenticated()) {
            // user is not allowed
            $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
          } else {
            // user is not logged in
            $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
          }
        }
      });
    })
    .config(function($routeProvider, USER_ROLES) {
        $routeProvider
            .when('/login', {
                templateUrl: 'partials/login.html',
                resolve: {
                    authorizedRoles: [USER_ROLES['*']]
                }
            })
            .when('/logout', {
                templateUrl: 'partials/logout.html',
                resolve: {
                    authorizedRoles: [USER_ROLES['*']]
                }
            })
            .when('/register', {
                templateUrl: 'partials/register.html',
                controller: 'registerController',
                resolve: {
                    authorizedRoles: [USER_ROLES['*']]
                }
            })
            .when('/home', {
                templateUrl: 'partials/home.html',
                controller: 'homeController',
                resolve: {
                    authorizedRoles: [USER_ROLES.admin, USER_ROLES.advertiser, USER_ROLES.user]
                }
            })
            .otherwise({
                redirectTo: '/home'
            });
    });

angular.element(document).ready(function() {
    angular.bootstrap(document, ['angularMyApp']);
});

services.js 

angularMyApp.service('Session', function () {
  this.create = function (sessionId, userId, userRole) {
    this.id = sessionId;
    this.userId = userId;
    this.userRole = userRole;
  };
  this.destroy = function () {
    this.id = null;
    this.userId = null;
    this.userRole = null;
  };
  return this;
});

angularMyApp.factory('AuthService', function ($http, Session) {
  var authService = {};

  authService.login = function (credentials) {
    return $http
      .post('/login', credentials)
      .then(function (res) {
        Session.create(res.data.id, res.data.user.id, res.data.user.role);
        return res.data.user;
      });
  };

  authService.isAuthenticated = function () {
    return !!Session.userId;
  };

  authService.isAuthorized = function (authorizedRoles) {
    if (!angular.isArray(authorizedRoles)) {
      authorizedRoles = [authorizedRoles];
    }
    return (authService.isAuthenticated() && authorizedRoles.indexOf(Session.userRole) !== -1);
  };

  return authService;
});

controlers.js 

angularUrbzApp.controller('homeController', function ($scope, Messages) {
  $scope.radius = 10000;
  $scope.radiusShow = false;

  $scope.radiusFn = function (message) {
    return message.meters <= $scope.radius;
  };

});
angularMyApp.controller('applicationController', function ($scope, $rootScope, $location, USER_ROLES, AuthService) {
  $scope.currentUser = null;
  $scope.userRoles = USER_ROLES;
  $scope.isAuthorized = AuthService.isAuthorized;
  $scope.setCurrentUser = function (user) {
    $scope.currentUser = user;
  };

  $rootScope.$on('event:auth-not-authenticated', function(){
    console.log('listen')
    $location.path('/login');
  });

});

的index.html 

<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
    <meta charset="utf-8">
    <title>MyApp</title>
</head>
<body ng-controller="navController">
    <div class="wrap" ng-controller="applicationController">
        <div data-ng-view></div>
    </div>
<!-- Scripts -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/fr-ca.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</body>
</html>

[编辑]

错误输出 

"Error: [ng:areq] http://errors.angularjs.org/1.2.27/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
z/<@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:6:450
Db@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:19:106
Ya@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:19:193
qc@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:32:393
d@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:34:398
l/</<@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular-route.min.js:10:305
r@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:7:390
l/<@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular-route.min.js:10:251
De/e/l.promise.then/J@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:101:87
De/e/l.promise.then/J@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:101:87
De/f/<.then/<@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:102:259
Yd/this.$get</h.prototype.$eval@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:113:28
Yd/this.$get</h.prototype.$digest@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:110:109
Yd/this.$get</h.prototype.$apply@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:113:360
dc/c/<@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:18:268
d@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:35:34
dc/c@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:18:176
dc@file:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:18:387
@file:///C:/Users/theo/Documents/sample/MyApp/www/js/app.js:102:9
n.Callbacks/j@file:///C:/Users/theo/Documents/sample/MyApp/www/js/jquery-2.1.1.min.js:2:26855
n.Callbacks/k.fireWith@file:///C:/Users/theo/Documents/sample/MyApp/www/js/jquery-2.1.1.min.js:2:27673
.ready@file:///C:/Users/theo/Documents/sample/MyApp/www/js/jquery-2.1.1.min.js:2:29465
I@file:///C:/Users/theo/Documents/sample/MyApp/www/js/jquery-2.1.1.min.js:2:29656
" angular.min.js:92
e/<() angular.min.js:92
Qd/this.$get</<() angular.min.js:68
De/e/l.promise.then/J() angular.min.js:101
De/e/l.promise.then/J() angular.min.js:101
De/f/<.then/<() angular.min.js:102
Yd/this.$get</h.prototype.$eval() angular.min.js:113
Yd/this.$get</h.prototype.$digest() angular.min.js:110
Yd/this.$get</h.prototype.$apply() angular.min.js:113
dc/c/<() angular.min.js:18
d() angular.min.js:35
dc/c() angular.min.js:18
dc() angular.min.js:18
<anonyme> app.js:102
n.Callbacks/j() jquery-2.1.1.min.js:2
n.Callbacks/k.fireWith() jquery-2.1.1.min.js:2
.ready() jquery-2.1.1.min.js:2
I() jquery-2.1.1.min.js:2

1 个答案:

答案 0 :(得分：0)

我解决了这个问题。 为了纠正以前的错误，我更改了一行：

var authorizedRoles = next.data.authorizedRoles;
--------
.when('/home', {
    templateUrl: 'partials/home.html',
    controller: 'homeController',
    data: {
        authorizedRoles: [USER_ROLES.user]
    }
})

要：

var authorizedRoles = next.resolve.authorizedRoles;
--------
.when('/home', {
    templateUrl: 'partials/home.html',
    controller: 'homeController',
    resolve: {
        authorizedRoles: [USER_ROLES.user]
    }
})

这是一种错误的方式！

相关问题
最新问题