javascript - 基于Role构建$routeProvider

Question

我有一个非常简单的要求。

我有 3 个用户 Angular 色:

1. 猫用户
2. LICUSER

3. 所有用户

   • 我在 $rootScope.userRole 变量中拥有用户 Angular 色的值。
   • 我在 AngularJS 应用程序启动之前已经定义了用户 Angular 色，因为 AngularJS 应用程序是从 PHP 脚本调用的，并且用户 Angular 色已经在 PHP 脚本中定义。

现在，当 AngularJS 应用程序启动时，根据 Angular 色我希望有以下路由:

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