使用带有$ StateChangeStart的AngularJS和ui.router来处理$ rootScope级别的Session API和逻辑流程

时间:2016-07-07 06:32:34

标签: angularjs session angular-ui-router

我要做的是验证用户身份验证并做出相应的响应。使用会话数据填充$ rootScope或重定向到登录页面。我希望其他控制器和视图可以访问会话数据。

来自服务器的Session响应是一个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中存储或访问,我不能在我的视图中使用它。

仪表板视图如下所示:

<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(...)。有什么建议吗?

1 个答案:

答案 0 :(得分:1)

应该是$stateChangeStart。请注意,第一个字母很小而不是大写字母。