Question

如果用户未登录，我尝试将用户重定向到登录页面。我无法工作的唯一用例是用户是否将浏览器指向一个URL要求认证。

如果用户直接转到 http://.../index.html#/dashboard （需要身份验证），浏览器将尝试加载该页面。

如果用户首先转到 http://.../index.html#/login ，然后替换“登录”＆＃39;使用＆＃39;仪表板＆＃39;，应用程序将正确地不允许并重定向到登录页面。

当用户直接进入仪表板时，我可以看到代码命中了重定向逻辑，但似乎只是忽略它。

这是我的ui-router配置和代码：

angular.module('app', [
    'ngRoute',
    'ngCookies',
    'ui.router',
    'datatables',
    'datatables.bootstrap',
    'angularMoment'
])
    .config(config)
    .run(run);

config.$inject = ['$stateProvider', '$urlRouterProvider', '$httpProvider'];
function config($stateProvider, $urlRouterProvider, $httpProvider) {

    $stateProvider
        .state('login', {
            url: '/login?ac',
            controller: 'LoginController as vm',
            templateUrl: 'app/login/login.view.html'
        })
        .state('content', {
            url: '/',
            abstract: true,
            views: {
                // the main template will be placed here (relatively named)
                '@': {
                    templateUrl: 'app/content-template/container-with-nav.partial.html'
                },
                'navigation@content': {
                    templateUrl: 'app/common/views/master-navigation.partial.html'
                }
            }
        })
        .state('content.dashboard', {
            url: 'dashboard',
            views: {
                '': {
                    templateUrl: 'app/dashboard/dashboard.partial.html'
                },
                'glance@content.dashboard': {
                    templateUrl: 'app/dashboard/dashboard-overview.partial.html',
                    controller: 'DashGlanceController as vm'
                },
                'cases@content.dashboard': {
                    templateUrl: 'app/dashboard/dashboard-cases.partial.html',
                    controller: 'DashCasesController as vm'
                }
            }
        })
        .state('content.casedetails', {
            url: 'case/:caseId',
            views: {
                '': {
                    templateUrl: 'app/pages/cases/case.main.partial.html',
                    controller:  'CaseController as vm'
                },
                'casedetails@content.casedetails': {
                    templateUrl: 'app/pages/cases/case.details.partial.html'
                },
                'citation@content.casedetails': {
                    templateUrl: 'app/pages/cases/case.citation.partial.html'
                },
                'payout@content.casedetails': {
                    templateUrl: 'app/pages/cases/case.payout.partial.html'
                },
                'conversation@content.casedetails': {
                    templateUrl: 'app/pages/cases/case.conversation.partial.html'
                },
                'actionpending@content.casedetails': {
                    templateUrl: 'app/pages/cases/case.action-pending.partial.html'
                }
            }
        })
    ;

    $urlRouterProvider.otherwise('/login');

    $httpProvider.defaults.withCredentials = true;
}

run.$inject = ['$state', '$rootScope', '$location', '$cookies'];
function run($state, $rootScope, $location, $cookies) {

    // keep user logged in after page refresh
    $rootScope.globals = ($cookies.get('globals')) ? JSON.parse($cookies.get('globals')) : null;
    console.log('globals (should be set if cookie was present): ', $rootScope.globals);

    if ($rootScope.globals) {
        console.log('Found a cookie for the logged in user: ', $rootScope.globals.currentUser);
    }

    $rootScope.$on('$locationChangeStart', function (event, next, current) {
        var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
        var isUserLoggedIn = ($rootScope.globals) && ($rootScope.globals.currentUser) ? true : false;
        console.log('restricted page: ', restrictedPage, ', logged in: ', isUserLoggedIn);

        // redirect to login page if not logged in and trying to access a restricted page
        if (restrictedPage && !isUserLoggedIn) {
            // This actually gets entered!
            console.log('Page is restricted and user is not logged in - redirecting to login from listener.');
            $state.go('login', {ac: ''});
            //$location.path('/login');
        }
    });
}

Answer 1

这是因为在直接进入受限状态时，配置会在运行run函数之前将用户重定向到新状态。

当他们首先登录时，原因是因为你已经设置了你的事件监听器，并且在转移到新状态时它没有被绑定。

基本上，如果您将侦听器更改为状态更改而不是start事件，则它可能会起作用，因为状态更改不会结束。

$rootScope.$on('$locationChangeSuccess', function (event, next, current) {

Angular - $ state.go在用户未登录时未按预期重定向

1 个答案: