AngularJS routing based on roles

Question

I am trying to create role based authentication and show an available content for user role. I have the following code in my route.js

Application.config(function($routeProvider, $locationProvider) {
    var role = ... ???
    if(role === 'ADMIN') {
        $routeProvider
            .when('/dashboard', {
                templateUrl: "views/adminDashboard.html",
                controller: "adminDashboardController"
            });
    }
    if(role === 'USER') {
        $routeProvider
            .when('/dashboard', {
                templateUrl: "views/userDashboard.html",
                controller: "userDashboardController"
            });
    }
});

How can I get role for user? I have an enpoint /user/me which returns current user's role but I can't do http here.

Where are you storing the user information? There's several options available to do this, including localstorage, $scope variable, cookies... If you want to check it every route change, just use $http and call your endpoint. — Fals
– Fals, Commented Nov 27, 2017 at 21:11
@Fals, how can I call /user/me endpoint from this part of code? I don't have $http because it isn't available here. I don't store any user inforamtions on UI. — boden
– boden, Commented Nov 27, 2017 at 21:14
You can force the injection of $http inside the config method. It would be better to get every user information somehow, and use it from the config function, instead of call the end-point when route changing triggers: stackoverflow.com/questions/17497006/… — Fals
– Fals, Commented Nov 27, 2017 at 21:21
@Fals Services can not be injected in config blocks. Configuration blocks - Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured. See AngularJS Developer Guide - Modules and Dependencies — georgeawg
– georgeawg, Commented Nov 28, 2017 at 4:29
The $http service can not be injected into the construction function of config blocks, but it can be injected in resolver functions of routes. For more information, see AngularJS $routeProvider API Reference - .when Method. — georgeawg
– georgeawg, Commented Nov 28, 2017 at 5:46

georgeawg · Accepted Answer · 2017-11-28 06:07:58Z

The $http service can not be injected into the construction function of config blocks, but it can be injected in resolver functions of routes:

Application.config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/dashboard', {
            template: `
                <div ng-if="$resolve.role=='ADMIN'"
                     ng-include="views/adminDashboard.html">
                </div>
                <div ng-if="$resolve.role=='USER'"
                     ng-include="views/userDashboard.html">
                </div>
            `,
            controller: "dashboardController",
            resolve: { 
                role: function($http) {
                    return $http.get("/user/me").then(function(response) {
                        return response.data;
                    });
                }
            }           
        })
});

For more information, see AngularJS $routeProvider API Reference - .when Method.

Collectives™ on Stack Overflow

AngularJS routing based on roles

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related