Angularjs using UI-Router Resolve for authentication
Right now I have a simple angular setup that has a login state and a cloud state. I want to make it so that the cloud state can only be started if the user is authenticated. If not, it will direct them to the entry state.
So far, I believe I have a "permissions" setting and I have a function .run()
configured to redirect to the login state if that fails.
I'm just having a hard time figuring out how I can do authenticated: authenticated
get what I need. I know I need to make a function authenticated
, I just don't know how to do it right.
I'm new to angular, so if anyone has any suggestions I would love to rate them.
var routerApp = angular.module('app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/cloud');
$stateProvider
.state('login', {
url: '/login',
templateUrl: "pages/templates/login.html"
})
.state('cloud', {
url: '/cloud',
templateUrl: "pages/templates/account.html",
resolve: { authenticated: authenticated }
})
})
.run(function ($rootScope, $state, $log) {
$rootScope.$on('$stateChangeError', function () {
$state.go('login');
});
});
source to share
There is nothing complicated about the solution, check the documentation:
Resolve
You can use a solution to provide your controller with content or data that is normal for state. The solution is an optional map of dependencies that must be injected into the controller.
If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $ stateChangeSuccess event is fired.
...
Examples:
Each of the objects below must be resolved (via deferred.resolve () if they are a promise) before creating the controller. Notice how each permission object is injected as a parameter into the controller.
$stateProvider.state('myState', {
resolve:{
// Example using function with simple return value.
// Since it not a promise, it resolves immediately.
simpleObj: function(){
return {value: 'simple!'};
},
...
If you need some kind of working plunker, there are similar Q and A:
- Ui router solution throws error provider
- Angular-ui State - multiple views not seeing my permission data
If we want to get DRY into the game, we have to start thinking about the state hierarchy (parent / child / ...). As discussed here:
We can introduce some super state 'root'
for some general purpose:
$stateProvider
.state('root', {
abstract : true,
// see controller def below
controller : 'RootCtrl',
// this is template, discussed below - very important
template: '<div ui-view></div>',
// resolve used only once, but for available for all child states
resolve: {
user: function (authService) {
return authService.getUserDetails();
}
}
})
This means that each child state will be granted permission (already granted) to grand-parent ("root").
In case we want to distinguish between parent and child permissions, we can do so, with the default permission names ... Check the details here:
In case we would also like to resolve deny , we can simply ask the provider $state
and redirect. The best place would be some kind of state change listener. There is a detailed description of how to use for authentication purposes $rootScope.$on('$stateChangeStart',
source to share