In Angularjs, how to block user approaching to some pages?

Question

I'm using ui-router and $stateProvider to show views.

This project is for building admin page, and there are three accounts.

My purpose is some pages must be shown to each accounts only.

So, I've used ng-if to not show on nav-bar , it was successful.

But if typed its url and approached directly, these pages were shown.

Are there any way to make branch in `configs'? or other ways to solve this?

I think this question does not need to post fiddle or plunker,

so I've just put my code of configs .

$urlRouterProvider.otherwise('/admin/login');
$stateProvider
.state('root.for_a', {
    url: '/:brand_id/for_a',
    views: {
        'appContainer@': {
            templateUrl: 'views/for_a.html',
            controller: 'ForACtrl',
        }
    }
})
.state('root.for_b', {
    url: '/:brand_id/for_b',
    views: {
        'appContainer@': {
            templateUrl: 'views/for_b.html',
            controller: 'ForBCtrl',
        }
    }
})
.state('root.for_c', {
    url: '/:brand_id/for_c',
    views: {
        'appContainer@': {
            templateUrl: 'views/for_c.html',
            controller: 'ForCCtrl',
        }
    }
})

I'll wait any handsome or pretty programmers can help me. :)

Thanks in advance.

Answer 1

What I did to overcome similar issue was, use 'ng-if' on 'ui-view' tags.

 <ui-view ng-if="functionToEvaluatePermissions()"></ui-view>
 <span ng-if="!functionToEvaluatePermissions()"> You shouldn't be here. </span>