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.

If i understand correctly, you want to secure pages through angularjs. I would never trust client-side code to implement security stuff as client-side scripts can be tampered with easily. Go for a server-side approach if you really want strict security. — Verthosa, Oct 25 '17 at 07:19
@Verthosa thanks to your comment. I have a problem that I can only build client side.. — Canet Robern, Oct 25 '17 at 07:22
Use resolve in ui-router :- https://stackoverflow.com/questions/28518181/angular-ui-router-how-to-prevent-access-to-a-state — Anmol Mittal, Oct 25 '17 at 08:33
@AnmolMittal thank you for giving this awesome solution link!! +10!! — Canet Robern, Oct 25 '17 at 08:50

score 1 · Accepted Answer · answered Oct 25 '17 at 07:28

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>

answered Oct 25 '17 at 07:28

Sawant Sharma

738
3
10

Oh, I think this is so attractive solution. I've considered this also, but wanted to know whether there is more specialized solution or not. – Canet Robern Oct 25 '17 at 07:42
If there is no solution better than this, then I'll choose your answer. :) thank you for your answer. – Canet Robern Oct 25 '17 at 07:44

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

1 Answers1