angularjs - 在模板加载之前检查用户是否登录

Question

我将 angularjs 与 ui-router 库一起使用。可以说我有一些管理员路线和一些用户路线。如果管理员或用户已登录，我想为他们显示一些页面(例如，管理员的 admin.html 和用户的 user.html)，否则 login.html

在后端我有一个特殊的 url，比如/auth/status/，它给我关于用户的信息(如果他已经登录以及他有什么 Angular 色)

有些情况我不知道该如何处理:

我转到“/”网址。应用程序加载。我的应用程序模块有一个运行方法。但是，当异步发生时，如何检查用户是否已登录？好吧，我有这个并且它以某种方式工作，但我不确定这是否是一个好的解决方案:

    app.config(['$stateProvider', '$routeProvider',
    function($stateProvider, $routeProvider) {
        $stateProvider
            .state('admin', {
                abstract: true,
                url: '/',
                templateUrl: 'templates/admin.html'
            })
            .state('admin.desktop', {
                url: 'desktop',
                templateUrl: 'templates/desktop.html'
            });
    }]);


    app.run([
    '$http', 
    '$rootScope', 
    '$location', 
    '$state', 
    'userRoles',
    function($http, $rootScope, $location, $state, userRoles) {
        var DEFAULT_ADMIN_STATE      = 'admin.desktop';

        var promise = $http.get('/auth/status/');

        promise.then(function(response) {
            $rootScope.isLogged = response.data.logged;
            $rootScope.userRole = userRoles[response.data.role];

            if (!$rootScope.isLogged) {
                $state.transitionTo('login');
            } else {
                switch (response.data.role) {
                    case 'admin': $state.transitionTo(DEFAULT_ADMIN_STATE);      break;
                }
            }
        }, function(response) {
            $location.path('/login');
        });
}]);

虽然我不明白:如果我去/url 我应该得到一个错误，因为它是抽象的。相反，当 $http.get 请求得到解决时(我在后端休眠 2 秒以检查)我转换到 admin.desktop 状态。我对按哪个顺序发生的事情感到困惑:状态加载模板或 app.run 函数与一些 ajax 请求...

主要问题是，当我转到/#/desktop 时，我如何首先检查用户是否已登录(向/admin/auth/发送请求并检查返回的内容)，然后才决定要做什么(转换登录或桌面状态)？我找到了 Delaying AngularJS route change until model loaded to prevent flicker这个，但对我来说还是有点模糊。当我想加载实体列表然后显示模板时，Resolve 属性似乎是一种解决方案。但我想为所有状态提供一些“之前”功能，它只检查用户是否已登录并具有相应的 Angular 色(有一刻:我不想使用/admin/entites 或/user/entities url，只想拥有/实体。据我所知，几个州可能有相同的网址)。所以基本上看起来如果我去/someurl 我想运行方法等到它得到 ajax 响应并在转换到某个状态之后。取而代之的是/someurl 对应的状态加载一个模板...

我还发现了一篇关于 Angular 身份验证的文章，但作者使用的 cookie 不是异步的东西

更新:当我使用 cookie 检查用户是否已登录并转到/#/desktop 时，我仍然呈现它，并且 $state.transitionTo 不起作用..

Answer 1

你应该在页面加载之前检查它:

我现在不能写完整的例子，但通常你应该这样做:

.run([ ..., function(....) {
    $scope.$on('$routeChangeStart', function(next, current) { 
        ... check cookie here ...
    });
}]);