將AngularJS和ui.router與$ StateChangeStart一起使用邏輯流程在$ rootScope級別處理會話API

Question

我想做的是驗證用戶身份驗證並做出相應響應。 用會話數據填充$ rootScope或重定向到登錄頁面。 我希望會話數據可供其他控制器和視圖訪問。

來自服務器的會話響應是一個JSON對象：

{"user_id":"17","name":"Administrator","user_email":"admin@example.com"}

我的app.js看起來像這樣：

var app = angular.module('app', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider, $locationProvider){
        $stateProvider
            .state('login', {
                url: '/login',
                templateUrl: 'app/views/login.html'
            })
            .state('logout', {
                url:'/logout',
                templateUrl: 'app/views/login.html'
            })
            .state('dashboard', {
                url:'/dashboard',
                templateUrl:'app/views/dashboard.html',
                role: 0 
            });
        })
   .run(function($rootScope, $location, Data){
        $rootScope.$on('$StateChangeStart', function (event, toState,  fromState) {
            $rootScope.authenticated = false;
            Data.get('session').then(function (results) { // Sends request to server the above mention JSON object is returned
            if (results.user_id) {
                $rootScope.authenticated = true;
                $rootScope.user_id = results.user_id;
                $rootScope.name = results.name;
                $rootScope.user_email = results.user_email;
            } else {
                $location.path("/login");
            }
        });
    });

然后在我的控制器中：

app.controller('AuthCtrl', ['$scope','$rootScope', '$location', '$http', 'Data', function ($scope, $rootScope, $location, $http, Data) {
    $scope.login = {};
    $scope.doLogin = function (user) {
        Data.post('login', { // Sends login information to server               
            user: user
        }).then(function (results) {
            if (results.status == "success") {
                $location.path('dashboard');
            }
        });
    };  
    $scope.logout = function () {
        Data.get('logout').then(function (results) { // sends logout request to server
            $location.path('login');
        });
    }
}]);

登錄功能和響應可以正常工作。 注銷功能起作用並破壞會話。 服務器上的API會以應有的方式進行響應，但是會話數據未存儲在$ rootScope中或無法在$ rootScope中訪問，因此我無法在視圖中使用它。

儀表板視圖如下所示：

<div ng-controller="AuthCtrl">
    <h4>User Authenticated</h4>
    User ID: {{user_id}}
    <br/>NAME: {{name}}
    <br/>E-MAIL: {{user_email}}
    <br/>
    <a ng-click="logout();">Logout</a>
</div>

我不確定我是否正確使用$rootScope.$on('$StateChangeStart', function(...) 。有什么建議嗎？

Answer 1

它應該是$stateChangeStart 。 請注意，第一個字母較小，不能大寫。