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?
$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.
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).
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 ...
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With