Question

在页面加载时，我的应用程序会检查用户是否仍在服务器上有有效的会话。如果用户仍然登录，则应用程序应将其重定向到其仪表板（如果尚未处于（子）状态）。

使用自定义服务检查会话，状态重定向应该在其回调中发生。这一切都发生在页面初始化的函数init中。

它并不起作用，因为ui-router状态在此执行点期间仍为空。如何调用函数执行所有这些以便初始化状态呢？什么时候状态初始化？

index.html

<!DOCTYPE html>
<html lang="en">
    [...]
    <body ng-app="name" ng-controller="mainController" ng-init="init()" ui-view>
</body>
</html>

mainController

.controller('mainController', function ($scope, $state, session, [...]) {
    $scope.init = function () {
        session.isLoggedIn().success(function (response) {
            if (response) {
                if (!$state.includes('dashboard')) {
                    $state.go('dashboard');
                }
            } else {
                $scope.logout();
            }
        });
    };
})

编辑：路线定义

.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('loading', {
            url: '/',
            template: '...'

        })
        .state('login', {
            url: '/login',
            views: {...}
        })
        .state('dashboard', {
            url: '/dashboard',
            views: {...}
        })
        .state('dashboard.sub', {
            url: '/sub/{param:int}',
            views: {...}
        })
})

Answer 1

显然，在调用init()函数时，状态未初始化。我不能告诉你，在哪里放置init()功能使这成为可能，也不可能。

什么解决了等待第一个$stateChangeSuccess - 事件的问题，它将告诉您状态现在已加载。在那里你可以调用check函数 - 在这个特定的例子中，你甚至可以调用整个init()函数：

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
    $scope.init();
});

Answer 2

您只需使用resolve：

即可

.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('loading', {
            url: '/',
            template: '...'

        })
        .state('login', {
            url: '/login',
            views: {...}
        })
        .state('dashboard', {
            url: '/dashboard',
            views: {...},
            resolve: {
                isLoggedIn: function(session, $q, $state, $timeout) {

                    var deferred = $q.defer();

                    return session.isLoggedIn().success(function (response) {

                       if (response) {
                            // user is logged in so carry on...
                            return deferred.resolve();
                        } else {
                            // not logged in so go to login page
                            $timeout(function() {
                                $state.go('login');
                                deferred.reject();
                            });
                        }

                    });
                }
        })
        .state('dashboard.sub', {
            url: '/sub/{param:int}',
            views: {...}
        })
})

这将使请求检查用户是否已登录，如果用户已登录，则解析承诺并正常加载状态，否则将用户重定向到登录页面。

ui-router检查页面加载状态

2 个答案: