Angular - UI Router - control access to state and redirect

Question

I develop a website with authentication process. User can be admin or not. I write different components and differents states to route users.

I already control HTTP requests to handle anthentication process, but I want to force redirection when simple user try to go to a not Authorized Page page with typing adress.

Example

He types admin url:

I want to redirect this user to the page where he's coming from, or force him to stay at the current page...

I try to do something like this: www.seanmarchetti.com/authentication_with_angularui_router.html

But I have a different project structure

I control access to states in "admin", and I want to use $state.go, but to non-admin state.. I tried to use toState but didn't work (or I probably don't understand how use it properly)

Here is my code from admin.router.js:

'use strict';

angular.module('appModule.admin')
  .config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.when('/admin', '/admin/users');

    $stateProvider
      .state('admin', {
        url: '/admin',
        redirectTo: 'admin.users',
        template: '<admin></admin>',
        needAdmin: true,
      })
      .state('admin.users', {
        url: '/users',
        template: '<users></users>',
        needAdmin: true,
      })
      .state('admin.apis', {
        url: '/apis',
        template: '<engines></engines>',
        needAdmin: true,
      })

  })
  .run(function ($rootScope, $state, Auth) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
      if (toState.needAdmin && !Auth.isAdmin()) {
        console.log('fromstate', fromState);
        console.log('tostate', toState);
        $state.go('/*UNKNOWN  STATE FROM HERE*/');
        event.preventDefault();
      }
    });
  });

Can anyone help me how can I redirect user properly to .state unknown from admin ?

Answer 1

You just wrote anti-pattern for resolving states.

Please, use resolve property from ui-router: https://github.com/angular-ui/ui-router/wiki#resolve.

You should have a function needAdmin() { return Promise (...) //or $q.deffer.promise } that will resolve(true) if your check is passed (so state will be resolved) or reject(); $state.go(...) if your check failed.

reject() will automatically stop your state from resolving immediately (without any promises waiting to be resolved in memory to avoid memory leaks).

resolve() will just allow state to be resolved (accessed).

Simple example:

// somewhere in your AuthFactory
AuthFactory.isAdmin () {
  var deferred = $q.defer();
  
  if (AuthFactory.isAdmin === true) {
    deffered.resolve(true);
  } else {
    deffered.reject('Not an admin');
    $state.go('...');
  }
  
  return deferred.promise;
}

// in your configuration
$stateProvider
  .state('admin', {
    url: '/admin',
  
    ...
  
    resolve: {
      checkAdminBeforeAccessing: function (AuthFactory) {
        return AuthFactory.isAdmin();
      }
    }
  })
  .state('anotherStateNeedAdmin', {
    url: '/another',
  
    ...
  
    resolve: {
      checkAdminBeforeAccessing: function (AuthFactory) {
        return AuthFactory.isAdmin();
      }
    }