錯誤：[ng：areq]與角JS（在教程閱讀後）

我試圖使角JS的身份驗證系統。我按照這個教程：https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec 錯誤：[ng：areq]與角JS（在教程閱讀後）

我修復了我的大部分錯誤，但仍然有一個，我找不到解決方案。我的代碼如下：

感謝您的幫助。

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 
[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:19:106 
[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:19:193 
[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:32:393 
[email protected]:///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 
[email protected]:///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/[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:101:87 
De/e/l.promise.then/[email protected]:///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</[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:113:28 
Yd/this.$get</[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:110:109 
Yd/this.$get</[email protected]:///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 
[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:35:34 
dc/[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/angular.min.js:18:176 
[email protected]:///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/[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/jquery-2.1.1.min.js:2:26855 
n.Callbacks/[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/jquery-2.1.1.min.js:2:27673 
[email protected]:///C:/Users/theo/Documents/sample/MyApp/www/js/jquery-2.1.1.min.js:2:29465 
[email protected]:///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

來源

2015-01-03 Bluety

你能提供完整的錯誤輸出嗎？ – TheSharpieOne

我不推薦將AngularJS與jQuery一起使用。使用Google搜索，你會找到答案。 – edisonthk

建議在Angular之前包含jQuery，儘管它不是必需的。 – TheSharpieOne

我解決了這個問題。要糾正以前的錯誤，我改了行：

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] 
    } 
})

這是一種錯誤的方式！

來源

2015-01-03 18:08:42 Bluety

錯誤：[ng：areq]與角JS（在教程閱讀後）

回答

相關問題