Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UI-Router 1.0 redirect based on a user role

I'm upgrading to [email protected] and trying to figure out what is the best way to redirect user to a different state if he doesn't have necessary permissions.

This is what I have:

.state('company_dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard.html',
    controller: 'CompanyDashboardCtrl',
    resolve: {
        user: function(UserService) {
            return UserService.getActiveUser();
        },
        company: function(UserService) {
            return CompanyService.getActiveCompany();
        },
        permissions: function(CompanyService, user, company){
            return CompanyService.getUserPermissions(company, user);
        }
    },
    onEnter: function($state, permissions) {
        if (permissions.canAccessDashboard === false)
            return $state.go('company_landing_page');
    }
})

The above example works, but it logs the following error: TransitionRejection(type: 2, message: The transition has been superseded by a different transition, detail: Transition#1( ''{} -> 'company_landing_page'{} )) which makes me think, there should be a better way.

Side question, is it the good practice to check permissions during the resolve?

UPDATE:

Changing $state.go() to $state.target() helped me to get rid of the console error. This comment has helped. Though the question stands, whether I'm doing it it the right place?

like image 699
Websirnik Avatar asked Sep 13 '16 17:09

Websirnik


People also ask

What is $stateParams in AngularJS?

$stateParams captures url-based params that $state considers applies to that state, even if its child state contains more params. $state. params seems to capture all url + non-url based params of the current state you are in. If you are in state parent.

What is UI in Router?

UI-Router is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember Router, UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1. x).

What is UI sref in AngularJS?

ui-sref-active directive ui-sref-active is a directive working alongside ui-sref to add classes to an element based on the state of the ui-sref directive. This can be replaced with the Angular equivalent RouterLinkActive directive like so: HTML. Copy ...

What is UI Router in angular?

Angular-UI-Router is an AngularJS module used to create routes for AngularJS applications. Routes are an important part of Single-Page-Applications (SPAs) as well as regular applications and Angular-UI-Router provides easy creation and usage of routes in AngularJS.


1 Answers

I would add a data property to your state as follows:

.state('company_dashboard', {
    data: {
           requiresAuthentication: true
    }
}

And then:

app.run(function ($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
        // Check if user is authenticated
        // And route requires authentication
       if (!toState.data.requiresAuthentication) {
            $state.go(toState.name, toParams);
       } else if (user && toState.data.requiresAuthentication) {
            $state.go(toState.name, toParams);
       } else {
            $state.go('login');
       }
    });
});

This seems to work quite well even if I am sure it can be more polished, but I hope this gives you an idea on how you may proceed.

like image 183
Aibu Avatar answered Nov 15 '22 06:11

Aibu