Restricting access to views until logged in

Question

Restricting access to views until logged in

I was wondering how one would go by restricting access to any and all views (except the login / register) views until the user in question logs in.

I would then use $http.post to post the content of the form to my backend and if the user is logged in with no issue, redirect to a dash view.

json
angularjs
ionic-framework

Answer 1

I would recommend using the $stateChangeStart event to listen for changes to the views, and do a check if the user is logged in or not. Since Ionic uses the ui-router instead of Angular's default $route you need to use the ui-router's API.

https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
    event.preventDefault();

    // Check if user is logged in here, if not redirect state
    if (!User.valid) {
      $state.go('home.login');
    }
});

Using the resolve feature of declaring your states requires that you add a resolve to any route you want to secure. Using the event listener allows you to handle it in one place.

Answer 2

You can resolve to redirect if not logged

         config(['$routeProvider', function ($routeProvider) {

          $routeProvider
           .when('/restricted',{
            'templateUrl': //some template url,
            //Etc...
            //then ...
            'resolve': {
             'onEnter': function (redirectService, authService) {

               if (!!!authService.isLogged()) {

                redirectService.redirectNotlogged();
               }
             } 
            }
           });

        }]);