How to prevent pre-loading remote views before authentication?

ionic-v1
1

Hi There!

Thank you for the great framework. Building my first ionic app. My intention is to make the user login first and then switch to tabs state. Thanks a bunch for Sign-in CodePen sample.

The issue is that when the ionic app is loaded, it is attempting to pre-load all the views mentioned in the $stateProvider, including the remote views that need authentication. As expected, the server is returning 401 (Unauthorized) message for such requests. Once the user logs in, things work as expected.

I am familiar with Angular $routeProvider but $stateProvider seems to work differently. What is the best approach to solve this issue?

Here are the states.

        $stateProvider
            .state('/', {
                url: '/',
                templateUrl: 'LogIn/Index?cache=' + new Date(),
                controller: 'HomeController'
            })
            .state('login', {
                url: '/login',
                templateUrl: 'LogIn/Index?cache=' + new Date(),
                controller: 'HomeController'
            })
            .state('tabs', {
                url: '/tab',
                abstract: true,
                templateUrl: 'templates/tabs.html'
            })
            .state('tabs.home', {
                url: '/home',
                views: {
                    'home-tab': {
                        //templateUrl: 'templates/home.html',
                        templateUrl: 'Home/Index?cache=' + new Date(),
                        controller: 'HomeController'
                    }
                }
            })
            .state('tabs.study', {
                url: '/study',
                views: {
                    'study-tab': {
                        templateUrl: 'Study/Index?cache=' + new Date(),
                        controller: 'StudyMobileController',
                        resolve: {
                            'bookTitles': ['GlobalData', function (GlobalData) {
                                return GlobalData.getBookTitles().then(function (res) {
                                    return res.data;
                                });
                            }],
                            'userBookmarks': ['GlobalData', function (GlobalData) {
                                return GlobalData.getUserBookmarks().then(function (res) {
                                    GlobalData.UserBookmarks = res.data;
                                    return GlobalData.UserBookmarks;
                                });
                            }]
                        }
                    }
                }
            })
            .state('tabs.bookPage', {
                url: '/bookPage',
                views: {
                    'study-tab': {
                        templateUrl: 'Study/bookPage?' + new Date(),
                        controller: 'BookPageMobileController',
                        resolve: {
                            'bookPageNumbers': ['GlobalData', function (GlobalData) {
                                return GlobalData.getBookPageNumbers(GlobalData.selectedBookId).then(function (res) {
                                    return res.data;
                                });
                            }]
                        }
                    }
                }
            });

Greatly appreciate your help.