Issue when a route is not resolved

ionic-v1
1

Hi everyone, I have an issue that has been bothering me the entire day. I’m creating an app with included authentication. I need to protect some routes because they should be used only when a user is logged in. As of this moment I’m doing the following in order to do so:

(This is part of config function in app.js)

  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.scan', {
    url: '/scan',
    views: {
      'tab-scan': {
        templateUrl: 'templates/tab-scan.html',
        controller: 'ScanCtrl'
      }
    },
    resolve: {authenticate: authenticate }
  })
  .state('tab.login',{
      url: '/login',
      views: {
          'tab-login': {
            templateUrl: 'templates/tab-login.html',
            controller: 'LoginCtrl'
          }
      }
  })
  .state('tab.projects',{
      url: '/projects',
      views: {
          'tab-projects': {
              templateUrl: 'templates/tab-projects.html',
              controller: 'ProjectsCtrl',
          }
      },
      resolve: {authenticate: authenticate }
  })
  .state('tab.project-details',{
      url: '/projects/:projectId',
      views: {
          'tab-projects': {
              templateUrl: 'templates/project-detail.html',
              controller: 'ProjectDetailCtrl',
          }
      },
      resolve: {authenticate: authenticate }
  })
  .state('tab.project-participants',{
      url: '/participants/:projectId',
      views: {
          'tab-projects': {
              templateUrl: 'templates/project-participants.html',
              controller: 'ProjectParticipantsCtrl',
          }
      },
      resolve: {authenticate: authenticate }
  });


  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/projects');
    function authenticate($q, $state, $timeout, SLAuth) {
      var deferred = $q.defer();
      if (SLAuth.getAuth()) {
        // Resolve the promise successfully
        deferred.resolve();
      } else {
        // The next bit of code is asynchronously tricky.

        $timeout(function() {
          // This code runs after the authentication promise has been rejected.
          // Go to the log-in page
          $state.go('tab.login');
        });

        // Reject the authentication promise to prevent the state from loading
        deferred.reject();
      }
      return deferred.promise;
    }

I have also a templates/tabs.html with the following content:

<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">


    <!-- Projects Tab -->
    <ion-tab title="Projects" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/projects">
      <ion-nav-view name="tab-projects"></ion-nav-view>
    </ion-tab>

  <!-- Scan Tab -->
  <ion-tab title="Scan" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/scan">
    <ion-nav-view name="tab-scan"></ion-nav-view>
  </ion-tab>

  <!-- Login Tab -->
  <ion-tab title="Login" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/login">
    <ion-nav-view name="tab-login"></ion-nav-view>
  </ion-tab>


</ion-tabs>

The tab.projects is the default route. However, when a user is not logged in, the app loads the login view as expected. However, if I click on the tabs for Projects and Scan and the user is not logged in, it only shows a blank page, even though the $state.go function is called and the url of the browser in which I’m doing testing gives the url of the login route. What can I do in order to do the redirect as expected (Such redirect that gives also the content of the login route)?

Thanks in advance :slight_smile: