Построение $routeProvider на основе роли

Question

У меня очень простое требование.

У меня 3 роли пользователя:

1. CATUSER
2. LICUSER

3. ВСЕ ПОЛЬЗОВАТЕЛИ

   • У меня есть значение роли пользователя в $rootScope.userRole переменная.
   • Роль пользователя уже определена до запуска приложения AngularJS, поскольку приложение AngularJS вызывается из сценария PHP, а роль пользователя уже определена в сценарии PHP.

Теперь, когда приложение AngularJS запускается, в соответствии с ролью я хочу иметь следующие маршруты:

$ rootScope.userRole == "CATUSER"

if ($rootScope.userRole == "CATUSER") {

    $routeProvider
        .when("/catheter", {
            title: "Catheter Expiration Code Generator",
            templateUrl: "app/catheter/catheter.html",
            controller: "CatheterController",
            controllerAs: "vm"
        })
        .when("/support", {
            title: "Support",
            templateUrl: "app/support/support.html",
            controller: "SupportController",
            controllerAs: "vm"
        })
        .otherwise({
            redirectTo: "/catheter"
        });

}

$ rootScope.userRole == "LICUSER"

if ($rootScope.userRole == "LICUSER") {

    $routeProvider
        .when("/license", {
            title: "License Generator",
            templateUrl: "app/license/license.html",
            controller: "LicenseController",
            controllerAs: "vm"
        })
        .when("/support", {
            title: "Support",
            templateUrl: "app/support/support.html",
            controller: "SupportController",
            controllerAs: "vm"
        })
        .otherwise({
            redirectTo: "/license"
        });

}

$ rootScope.userRole == "ALLUSER"

if ($rootScope.userRole == "LICUSER") {

   $routeProvider
        .when("/license", {
            title: "License Generator",
            templateUrl: "app/license/license.html",
            controller: "LicenseController",
            controllerAs: "vm"
        })
        .when("/catheter", {
            title: "Catheter Expiration Code Generator",
            templateUrl: "app/catheter/catheter.html",
            controller: "CatheterController",
            controllerAs: "vm"
        })
        .when("/support", {
            title: "Support",
            templateUrl: "app/support/support.html",
            controller: "SupportController",
            controllerAs: "vm"
        })
        .otherwise({
            redirectTo: "/license"
        });

}

Я не хочу использовать UI Router.

Answer 1

Я использовал UI Router для такого рода целей в прошлом. Вот пример кода, чтобы вы начали

angular
.module('app', [

])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
    .state('license', {
        url: 'url',
        templateUrl: './preview.html',
        controller: 'LicenseController',
        data: {
            requiredAuth: true,
            role: ['CATUSER', 'LICUSER'],
            permission : ['read', 'write', 'etc etc']
        }
    })
    $urlRouterProvider.otherwise(subdomain1 + 'error');
})
.run(['$rootScope', '$state', function ($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        // is authenticated
        var isAuthenticationRequired = toState.data
              && toState.data.requiredAuth
              && !AuthService.isAuthenticated() //some service to check if user is authenticated (I use localstorage lookup here)
        ;
        // is authorized
        var isAuthorizationRequired = toState.data
              && (toState.data.role && AuthService.IsInRole(toState.data.role))
              && (toState.data.permission && AuthService.IsInPermission(toState.data.permission))
        ;
        if (isAuthenticationRequired) {
            event.preventDefault();
            $state.go('auth.login');
        }
        else if (isAuthorizationRequired) {
            event.preventDefault();
            $state.go('auth.denied');
        }
    });
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, error) {
        cfpLoadingBar.complete();
    });
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
        cfpLoadingBar.complete();
    });
}]);

Здесь вы видите, что у Лицензионного маршрута есть данные о собственности. Требуется аутентификация и авторизация для ролей LICUSER и CATUSER. Вы также можете добавить дополнительные проверки прав доступа, например, чтение, запись и т. Д. Если пользователь прошел проверку подлинности и авторизовал запрошенное состояние, запрошенное состояние будет загружено, иначе будет перенаправлен на вход в систему или запрос отклонен.