AngularJS защищает маршруты с помощью ui-router и ocLazyLoad - PullRequest
Новая
       27

AngularJS защищает маршруты с помощью ui-router и ocLazyLoad

0 голосов
/ 15 октября 2018

Я искал часы, но не нашел работающего и понятного решения этой проблемы.У меня есть приложение AngularJS (версия 1.7), которое использует ocLazyLoad для отложенной загрузки контроллеров и служб и пользовательского интерфейса (версия 1.0.20).У меня есть состояние входа в систему, которое является общедоступным, и все другие состояния, которые защищены, и потомки абстрактного состояния (также защищены).Каждое состояние использует свойство resolver для отложенной загрузки своего контроллера и других необходимых служб с помощью ocLazyLoad. 

$stateProvider

// Login state.
.state('login',{
    templateUrl : 'app/components/login/login.html',
    controller : 'loginController',
    resolve : {
        deps : ['$ocLazyLoad',function($ocLazyLoad) {
            return $ocLazyLoad.load('app/components/login/login.js');
        }]
    },
    cache : false
})

// Main (abstract) state.
.state('main',{
    abstract : true,
    template : '<ui-view />',
    controller : 'mainController',
    resolve : {
        deps : ['$ocLazyLoad',function($ocLazyLoad) {
            return $ocLazyLoad.load('app/components/main/main.js');
        }]
    },
    cache : false
})

// Dashboard state (main state child).
.state('main.dashboard',{
    templateUrl : 'app/components/dashboard/dashboard.html',
    controller : 'dashboardController',
    resolve : {
        deps : ['$ocLazyLoad',function($ocLazyLoad) {
            return $ocLazyLoad.load('app/components/dashboard/dashboard.js');
        }]
    },
    cache : false
});

В методе app run() я прослушиваю событие перехода onBefore следующим образом: 

$transition.onBefore({},function(trans) {
    var name = trans.to().name;

    // Synchronous service. Checks for a valid cookie.
    var authenticated = Account.isAuthenticated();

    // If the state is not login and there is no authenticated user, redirects to the login.
    if (name!=='login' && !authenticated) {
        trans.abort();
        $state.go('login');
    }

    // Else, if the state is login and a user is authenticated, redirects to the dashboard.
    else if (name==='login' && authenticated) {
        trans.abort();
        $state.go('main.dashboard');
    }
});

Я использовал trans.abort(), потому что, если я не отменяю переход, у меня появляется ошибка об отмене перехода.Если я использую и возвращаю $state.target() (или trans.router.stateService.target()), у меня возникает ошибка, когда я нажимаю кнопку входа в систему и, если пользователь успешно входит в систему, перенаправляет на панель управления (Невозможно загрузить 'app / components / dashboard / dashboard.JS').Но если я обновлю страницу входа ВРУЧНУЮ после входа в систему, она будет успешно перенаправлена ​​на панель управления.Это также происходит, если я пытаюсь выйти из защищенного состояния.Когда происходит выход из системы, он должен перенаправить в состояние входа в систему.Но у меня есть ошибка, похожая на предыдущую: невозможно загрузить 'app / components / login / login.js'.Эта последняя ошибка также происходит, если я отменяю переход и использую $state.go() для перенаправления.

Я хочу знать, каков наилучший или предпочтительный способ защиты некоторых маршрутов (с дочерними состояниями) с использованием ocLazyLoad и какизбегайте всех этих ошибок.Правильно ли использовать событие $transition.onBefore?Или я должен внедрить эти проверки в свойство resol основного состояния и состояния входа в систему?Я проверил множество учебных пособий и примеров, но большинство из них устарели, а другие не ясны или сильно отличаются от людей, которые их написали.Я пытался с transition.abort(), $state.target(), $timeout, но у меня всегда есть ошибки.

...