The functionality of the .state property is not performing as anticipated

Question

The functionality of the .state property is not performing as anticipated

I am trying to implement a check before entering a state using the ui-router resolve property. The goal is to verify if the user is logged in by calling the AuthService function. However, I am not getting any result.

Angular version: 1.5.8
angular-ui.router version: 0.2.18

index.route.js

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();
          }]
        }
      })
});

auth.service.js

'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;
});

index.run.js

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 have come across information stating that resolve returns a promise object, but my simple function only returns true/false. Could this be the issue? Any suggestions on how to properly handle this situation?

javascript angularjs angular-ui-router

Answer 1

Answer №1

If you want the resolve function to work with a promise, ensure that you return a promise in your code. Adjust your code as follows:

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 eliminate the resolve keyword from your state configuration and update 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()) {
                        // Prevent navigating to state
                        e.preventDefault();
                        // Redirect to another page like login
                        //$state.go('login')
                        return;
                    }
                }
            });
        });

Edit

You can make the above code (2nd approach) more generic by doing 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()) {
                    // Prevent navigating to state
                    e.preventDefault();
                    // Redirect to another page like login
                    //$state.go('login')
                    return;
                }
            });
        });

Now include 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
})

Answer 2

If you want the resolve function to work with a promise, ensure that you return a promise in your code. Adjust your code as follows:

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 eliminate the resolve keyword from your state configuration and update 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()) {
                        // Prevent navigating to state
                        e.preventDefault();
                        // Redirect to another page like login
                        //$state.go('login')
                        return;
                    }
                }
            });
        });

Edit

You can make the above code (2nd approach) more generic by doing 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()) {
                    // Prevent navigating to state
                    e.preventDefault();
                    // Redirect to another page like login
                    //$state.go('login')
                    return;
                }
            });
        });

Now include 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
})

The functionality of the .state property is not performing as anticipated

index.route.js

auth.service.js

index.run.js

Answer №1

Similar questions

Having trouble pinpointing the source files that are loading .js in the <head> section of my Magento website

Utilizing the POST request to signal the server's response of a 404

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

javascript search for parent function argument

Discovering the change in checkboxes resulting from a user click or JavaScript code can be accomplished by utilizing the document.getElementById

Maintain the value of `this` using a recursive setImmediate() function

when the submit button is clicked, verify whether the input field is empty

Unveiling the secrets of the Google Region Lookup API

The Mongoose server unexpectedly shut down

The Ajax call retrieving the complete script

Using JavaScript modules in a multi-page website with Closure Compiler integration

Typescript throwing a fit over a lack of index signature in explicit type declaration

Is there a way to replace jQuery's .submit() method with Angular?

The most effective method for calculating overhead is through the utilization of synchronous techniques

Converting JSON Data into a Formatted HTML Table

Is there a method in Vuejs to choose a tab and update components simultaneously?

When the input element's visibility is toggled, the text elements wiggle slightly

add text nodes with unnecessary quotation marks around my selection list

Dividing the body of md-tabs in Angular material

Leveraging Cordova Plugins in Ionic 2