Different tabs for different user roles using $rootScope in .state

Question

What Im aiming is that I will have different tabs layout for different users like patient and doctors

in my controller, I store the logged user in $rootScope.currentUser like this

$auth.login(credentials).then(function(data) {
           return $http.get(CONSTANTS.LINK+'/authenticate/user');
        }, function(data) {
            var alertPopup = $ionicPopup.alert({
            title: 'Error Logging in',
            template: 'Invalid Credentials'
            });
            alertPopup.then(function(res) {
            });
        }).then(function(response) {
                var user = JSON.stringify(response.data.user);
                localStorage.setItem('user', user);
                $rootScope.authenticated = true;
                $rootScope.currentUser = response.data.user;
                $state.go('tabs.home');
            });;

Now this is my app.js. Nothing happens. am i Doing it right? The $rootscope.currentUser is also returning undefined when i try console.log($rootScope.currentUser);

.state('tabs', {
        url: '/tab',
        templateUrl: function ($rootScope) {
          if($rootScope.currentUser.role == 'Patient') {
            return 'templates/tabs.html';
          } else if ($rootScope.currentUser.role == 'Doctor') {
            return 'templates/tabs-doctors.html';
          }
        },
        abstract: true,
    })

I kinda think you're approaching this all wrong. What I'm thinking is you should create different states for doctor and patient, and then in your .run(or ready)function check the user and use $state.go. I believe this could take you in right direction http://stackoverflow.com/questions/27907670/how-to-handle-states-when-logged-in-ionic-firebase-angularjs — Marko, Nov 06 '16 at 18:03
You can also refer to this link http://stackoverflow.com/questions/23429055/angularjs-ui-router-load-template-and-controller-based-on-user-role also one more http://stackoverflow.com/questions/25047884/angular-ui-router-to-accomplish-a-conditional-view — user3249448, Nov 06 '16 at 18:10
The ui-router doesn't use the $injector service for the templateURL function. It invokes that function with a `params` argument. For more information, see [ui-router $stateProvider API Reference](https://ui-router.github.io/docs/0.3.1/#/api/ui.router.state.$stateProvider). It is erroneous to expect `$rootScope` to be injected into that function. — georgeawg, Nov 06 '16 at 20:18
Post answer when you get working example if you want, i'll upvote you. Might need sometimes for me/someone — Marko, Nov 06 '16 at 22:24

score 2 · Accepted Answer · answered Apr 09 '17 at 17:51

Since I was storing the user data in local storage when he logs in, I used that data to check the role of the user.

.state('tabs', {
        url: '/tab',
        templateUrl: function () {
          var user = JSON.parse(localStorage.getItem('user'));
          role = user.role;
          if(role == 'Patient') {
            return 'templates/tabs.html';
          } else if (role == 'Doctor') {
            return 'templates/tabs2.html';
          } else {
            return 'templates/tabs.html';
          }
        },
        abstract: true,
    })

Different tabs for different user roles using $rootScope in .state

1 Answers1