Conditionally navigate to state with angular ui-router

Currently, we have a ‘Portfolio’ tool in beta. Once a user logs in to the main app, if they have been given access to the beta, they can navigate to the Portfolio tool directly, without any additional login. If not, they should be redirected to a Portfolio login page (state is called portfolio.login) where they can login or contact support/sales etc. Right now I have the check in the resolve block, however $state.go(‘portfolio.login’) seems to fetch the right partials, but doesn’t render them on screen or navigate to the appropriate URL.

Code:

  • $stateChangeStart not being fired when state Changes in UI-Router ES6?
  • Transition to different state with state params
  • Angular JS/UI-Router: disable directives for a given state?
  • Angular 1.5 component access ui-router $state
  • angular ui-router multiple nested and controller data
  • Angular UI Router: child state loaded twice when parent and child take parameter of same name in url
  • angular.module('portfolio.manager').config(function ($logProvider, $stateProvider) {
    'use strict';
    
        $stateProvider
        .state('portfolio.manager', {
            url: '/manager',
            resolve: {
                CheckLoggedIn: function ($state, loggedIn) {
                    var _loggedIn = loggedIn.checkUser();
                    if (!_loggedIn) {
                        $state.go('portfolio.login');
                        console.log('not authorized');
                    }
                },
                portfolioAuthService: 'portfolioAuthService',
    
                User: function(portfolioAuthService){
                  return portfolioAuthService.getUser();
    
                },
                Portfolios: function (User, portfolioManagerService) {
                    return portfolioManagerService.getPortfolios();
                }
            },
            views: {
                'main@': {
                    templateUrl: 'app/portfolio/manager/portfolio-manager.html',
                    controller: 'PortfolioManagerCtrl'
                },
                'no-portfolios@portfolio.manager': {
                    templateUrl: 'app/portfolio/manager/partials/no-portfolios.html'
                },
                'create@portfolio.manager': {
                    templateUrl: 'app/portfolio/manager/partials/create.html'
                }
            }
        })
    

  • Controller not registering when using nested view
  • Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref=“…”>
  • Transition to different state with state params
  • Disable UI-Router Interaction with window.location
  • angularjs infdig error when change state on ui-router(with video)
  • AngularUI Router: multiple states with same url pattern
  • One Solution collect form web for “Conditionally navigate to state with angular ui-router”

    I ran in the same problem days ago. Instead of using resolve, I check if the user is logged when state changes, defining run module and listening $stateChangeStart event, then check if the current state required authentication. If so, check if the user is logged in.

    angular.module('portfolio.manager').config(function ($logProvider, $stateProvider) {
    'use strict';
    
        $stateProvider
        .state('portfolio.manager', {
            url: '/manager',
            resolve: {
                portfolioAuthService: 'portfolioAuthService',
    
                User: function(portfolioAuthService){
                  return portfolioAuthService.getUser();
    
                },
                Portfolios: function (User, portfolioManagerService) {
                    return portfolioManagerService.getPortfolios();
                }
            },
            data: {
                requiredAuthentication: true
            },
            views: {
                'main@': {
                    templateUrl: 'app/portfolio/manager/portfolio-manager.html',
                    controller: 'PortfolioManagerCtrl'
                },
                'no-portfolios@portfolio.manager': {
                    templateUrl: 'app/portfolio/manager/partials/no-portfolios.html'
                },
                'create@portfolio.manager': {
                    templateUrl: 'app/portfolio/manager/partials/create.html'
                }
            }
        })
    
    })
    .run(run);
    
      run.$inject = ['$rootScope','$state','loggedIn'];
    
      function run($rootScope,$state,loggedIn){
    
        $rootScope.$on('$stateChangeStart',function(e,toState){
    
          if ( !(toState.data) ) return;
          if ( !(toState.data.requiredAuthentication) ) return;
    
          var _requiredAuthentication = toState.data.requiredAuthentication;
    
    
          if (_requiredAuthentication && !loggedIn.checkUser() ){
    
            e.preventDefault();
            $state.go('portfolio.login', { notify: false });
            console.log('not authorized');
          }
          return;
    
    
        });
      };