在加载状态之前,我需要在angular js中为每个状态添加角色

Before loading state i need add role for each state in angular js?

本文关键字:状态 角色 添加 js 加载 angular      更新时间:2023-09-26

在下面的例子中,我在data内部有一个名为roles的变量,对于这个变量,我必须添加角色数组。现在,我在第二种状态下已经预定义了角色,但这个角色数组必须从webapi中加载。

.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('signin');
$stateProvider.state('site', {
    'abstract': true,
    resolve: {
        authorize: ['authorization', function (authorization) {
            alert(JSON.stringify(authorization))
            return authorization.authorize();
        }, ]
    }
})
.state('signin', {
    parent: 'site',
    data: {
        roles: []
    },
    url: '/signin',
    views: {
        '': { templateUrl: '/signin.html' },
        'content@': {
            templateUrl: '/index.html',
            controller: 'SigninCtrl'
        }
    }
})
.state('WorkArea', {
   parent: 'site',
   url: '/WorkArea',
   data: {
       roles: ['User', 'Dev']
   },
   views: {
       '': { templateUrl: '/Views/WorkArea/WorkArea.html' },
       'ContentOne@': {
           templateUrl: '/Views/WorkArea/ProjectList.html',
           controller: 'ProjectController'
       }
   }
 })
}]);

我指的是下面链接中的这个例子:-

angular ui路由器登录身份验证

以这种方式定义它:

 .state('WorkArea', {
   parent: 'site',
   url: '/WorkArea',
   data: {
       roles: (function() {
                return ['User', 'Dev'];
              })()
   },
 })

在这种情况下,可以使用IIFE向数据属性动态添加属性。

在你的app.run中使用:

$rootScope.$on('$stateChangeStart', function(event, toState){ 
    var roles = toState.data.roles ;
    console.log(roles);
   // your custom logic here for that state
})