Reputation: 54084
I want to use ui-router
resolve property to simply check just before entering that state whether user is logged in or not by using AuthService
function but it gives no result.
angular.module('app').config(routerConfig);
/** @ngInject */
function routerConfig($stateProvider, $urlRouterProvider, USER_ROLES) {
$stateProvider
.state('dashboard', {
url: "/dashboard",
templateUrl: "app/views/dashboard_2.html",
data: { requiresAuth: true, pageTitle: 'Dashboard', authorizedRoles: ['admin'] } ,
resolve: {
isLoggedin: ['AuthService', function(AuthService) {
return AuthService.isAuthenticated();
}]
}
})
});
'use strict';
angular
.module('app')
.factory('AuthService', function($log, $http, $q, $cookies){
var authService = {};
// .. login and logout methods...
authService.isAuthenticated = function () {
return !!$cookies.getObject('currentUser');
};
return authService;
});
angular
.module('app')
.run(function($rootScope, $state, $log, AuthService, AUTH_EVENTS) {
$rootScope.$on('$stateChangeStart', function (event, to, toParams, from, fromParams) {
// $log.debug('state change starts');
$log.debug(to.resolve);
});
I read that resolve return promise object , but I have simple function whcih return true/false
is that the problem? Kindly suggest me what to do in proper way so that
Upvotes: 1
Views: 44
Reputation: 25817
Since the resolve
function expects a promise, you should return a promise. Modify your code like:
isLoggedin: ['AuthService', '$q', function(AuthService, $q) {
var defer = $q.defer();
var isLoggedIn = AuthService.isAuthenticated();
if (isLoggedIn) {
defer.resolve();
} else {
defer.reject();
}
return defer.promise;
}]
Alternatively, you can remove the resolve
keyword from your state configuration and modify your run
block like this:
angular
.module('app')
.run(function ($rootScope, $state, $log, AuthService, AUTH_EVENTS) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, from, fromParams) {
if (toState.name === 'dashboard') {
if (!AuthService.isAuthenticated()) {
// Do not allow navigation to state
e.preventDefault();
// Redirect to somewhere else like login page
//$state.go('login')
return;
}
}
});
});
Edit
You can modify the above (2nd approach) code to make it generic like this:
angular
.module('app')
.run(function ($rootScope, $state, $log, AuthService, AUTH_EVENTS) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, from, fromParams) {
if (toState.requireAuthenticationFoo && !AuthService.isAuthenticated()) {
// Do not allow navigation to state
e.preventDefault();
// Redirect to somewhere else like login page
//$state.go('login')
return;
}
});
});
Now use the key requireAuthenticationFoo
in your state configuration:
state('dashboard', {
url: "/dashboard",
templateUrl: "app/views/dashboard_2.html",
data: {requiresAuth: true, pageTitle: 'Dashboard', authorizedRoles: ['admin']},
requireAuthenticationFoo: true
})
Upvotes: 1