Proper routing with a sign in screen and local storage


#1

Hi,

I’ve been trying to think of a way to accomplish this, but haven’t been able to get it exactly right.

Lets put up this chain of events:

User launches app
If app not signed in, show sign in screen otherwise show protected screen
User signs out and cannot hit back to end up at protected screen

So in my code I am using a router like this:

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('protectedaccount', {
            url: '/protectedaccount',
            templateUrl: 'templates/protectedaccount.html',
            controller: 'AccountController'
        })
        .state('login', {
            url: "/login",
            templateUrl: "templates/login.html",
            controller: "LoginController"
        });
    $urlRouterProvider.otherwise('/protectedaccount');
});

In this scenario, the application will launch and go directly to the protectedaccount screen. If the application is not signed in at this point, I have a redirect that goes to the login screen. The problem with this is, if the user hits the hardware back button after being redirected to the login screen, they will end up back at the protectedaccount screen.

I’ve also tried the scenario where the default screen is login and if already signed in, redirect to the protectedaccount screen. Once in the protected area, if the user hits the back button they will just end up at the login screen again.

What is the best way to handle sign ins with IonicFramework? In a perfect scenario I would want to avoid bouncing between screens, but instead only show the screen based on the given criteria.

nav-clear does not work for me because I am doing all this with JS.

Please throw some suggestions my way.

Thanks,


#2

Hmm, take a look at this example

Maybe the best way is to not create a new state, but instead set up a modal to intercept the users action.


#3

@mhartington,

I thought about this, but I don’t necessarily like how modals look on tablets. They appear full screen on phones which makes it look like a brand new screen, but they look like popups on tablets.

Has the $ionicViewService.clearHistory() been removed from the framework? I feel like if I could clear the navigation history stack via code after a sign in / sign out I would be good, but I couldn’t get the clearHistory() to work.

Any ideas along those lines or anything beyond modals?

Thanks,


#4

Well once last part about the modals, you can override the css that causes this… in case you wanted to know

No, it hasn’t been removed (AFAIK), it’s still referenced in the code, it’s just not documented for some reason


#5

Hi @mhartington,

Thanks for responding. Just to clear some stuff up for me. Does the clearHistory() function behave like nav-clear? nav-clear works great when pairing with UI, but since this is the background it won’t work. If clearHistory() performs like nav-clear that would be awesome.

Just to confirm on usage of clearHistory() as well. I’m assuming it should be called after a navigation takes place right?

Thanks,


#6

Hmm, some more digging into clearHistory() shows that it wouldn’t be a good option. But you can use nav-clear in a controller…sort of.

Basically it’s taking the functions that nav-clear uses and just putting them in a controller.

.controller('Fact2Ctrl', function($scope,$ionicViewService) {
  $scope.cantGoBack = function(){
    $scope.$on('$stateChangeStart', function() {
      $ionicViewService.nextViewOptions({
        disableAnimate: true,
        disableBack: true
      });
    });
  };
});

#7

That chunk alone seemed to do the trick for me.

Thanks @mhartington!