1

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.

boden
  • 1,621
  • 1
  • 21
  • 42
  • 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 Nov 27 '17 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 Nov 27 '17 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: https://stackoverflow.com/questions/17497006/use-http-inside-custom-provider-in-app-config-angular-js – Fals Nov 27 '17 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](https://docs.angularjs.org/guide/module#module-loading-dependencies) – georgeawg Nov 28 '17 at 04: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](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when). – georgeawg Nov 28 '17 at 05:46
  • @georgeawg I'm not saying to inject, I'm saying to use the injector :)! – Fals Nov 28 '17 at 12:46

1 Answers1

2

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.

georgeawg
  • 48,608
  • 13
  • 72
  • 95