Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ui-router: default route based on user role

I'm using UI router in my project. The home page of my application consists of 4 tabs, each routing to a different template. This is my current routing code, im using a forEach to create 6 routes.

['Draft','Assigned','InProgress','Completed','Rejected','All'].forEach(function (val) {
        $stateProvider.state({
            name: 'root.jobs.list.' + val.toLowerCase(),
            url: '/' + val.toLowerCase(),
            views: {
                'currentTab': {
                    templateUrl: 'adminworkspace/jobs',
                    controller: 'JobsController'
                }
            },
            data: {
                userJobsStatus: val
            }
        });
    });

By default when the user logs in, it goes to "root.jobs.list.draft". How do redirect to a given state based on the logged in user's role (Admin, User, Clerk etc..). If want to redirect all users that are part of the "Engineer" or "Lead Engineer" role to "root.jobs.list.inprogress"

I originally had this in the controller, but as you can see, it didn't work, because each time I clicked on a tab, it always routes back to "root.jobs.list.inprogress"

    if (user !== undefined) {
        if (user.BusinessRole == "Engineer" || user.BusinessRole == "Lead Engineer")
            $state.go('root.jobs.list.inprogress');
    }
like image 204
FaNIX Avatar asked May 03 '16 11:05

FaNIX


2 Answers

I already have had to solve that :

I've registered a state that was used only to handle the default page based on the role.

        $urlRouterProvider.otherwise("/");
        $stateProvider.state("default", {
            url:"/",
            templateUrl: "app/core/home/default.html",
            controller: "DefaultController"
        });

The the controller was simply :

(function () {
    "use strict";

    angular.module("core").controller("DefaultController", [
        "$rootScope",
        "$state",
        "roles",
        function ($rootScope, $state, roles) {
            if ($rootScope.hasPermission(roles.SomeRoleName)) {
                $state.go("someStateName");
            } else if ($rootScope.hasPermission(roles.SomeRoleName)) {
                $state.go("someStateName");
            }
        }
    ]);
})();
like image 56
Deblaton Jean-Philippe Avatar answered Nov 01 '22 04:11

Deblaton Jean-Philippe


If the link of the default state is same for each role e.g /user/home for both admin and user. One thing we can do is to show different html templates in the default state of the app based on roles. ui-router provides @stateProvider service which has properties templateProvider and ControllerProvider properties. We can use them to figure out which template and controller we want to use for same default state. Here is the documentation link.

like image 35
akniazi Avatar answered Nov 01 '22 06:11

akniazi