基于 Role 构建 $routeProvider

Question

我的需求很简单

我有 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 路由器。

Answer 1

我过去使用 UI 路由器来达到这种目的。这是让您入门的示例代码

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 角色的授权。您还可以在此处添加更多权限检查，例如读取、写入等。如果用户经过身份验证和授权，则请求的请求状态将加载，否则将重定向到登录或拒绝请求。

基于 Role 构建 $routeProvider

Building $routeProvider based on Role

javascript

angularjs

route-provider

angularjs-config