Ionic login

ionic-v1
1

Hi all!
I was looking for good code for ionic login issue if I wanted to do it not with google/facebook,
I found some code for refrense GitHub - keithdmoore/ionic-http-auth: An ionic-starter-project to show how the angular-http-auth library can be used for authentication.
I did some code but looks I have 2 issues,
the first one the redrect not working after login

the error

Error: Cannot transition to abstract state ‘app’

the code

.controller('LoginCtrl', function ($scope, $state, AuthenticationService) {
    $scope.message = "";

    $scope.user = {
        username: null,
        password: null
    };

    $scope.login = function () {
        AuthenticationService.login($scope.user);
    };

    $scope.$on('event:auth-loginRequired', function (e, rejection) {
        console.log('handling login required');
        $scope.loginModal.show();
    });


    $scope.$on('event:auth-loginConfirmed', function () {
        $scope.username = null;
        $scope.password = null;
        $state.go('app');
    });

the app

 .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
    })
    .state('app.placeslists', {
        url: "/placeslists",
        cache: false,
        views: {
            'menuContent': {
                templateUrl: "templates/placeslists.html",
                controller: 'PlaceslistsCtrl'
            }
        }
    })

and the second issue how can I do what urls need to be after login and what not.

thanks!

2

Because ‘app’ is an abstract state, you should use it only as container for other states.

3

And how can I do it with my structure? I don’t what to change the logic, how can I do it on my abstract?

4

Simply navigate to the homepage or something, so:

.state('app.home', {
        url: "/home",
        cache: false,
        views: {
            'menuContent': {
                templateUrl: "templates/home.html"
            }
        }
    })

$scope.$on('event:auth-loginConfirmed', function () {
        $scope.username = null;
        $scope.password = null;
        $state.go('app.home');
    });
1 Like
5

And how can I do some routes that they should be auth with login?

6

I have a sample here where I am using parse as the backend for auth, but the pattern should work with any service

1 Like
7

Ionic uses the angular-ui-router library for routing, so their documentation would be a good place to start. Here’s a relevant FAQ.

A simple method would be to take advantage of the $stateChangeStart event message to conditionally do something before the state actually changes. Like redirect the user if they are not logged in:

var MyLogInRequiredStates = ['app.page1', 'app.page2'];

$rootScope.$on('$stateChangeStart', function(event, toState) {
    // This function will be called before every state change
    if (MyLogInRequredStates.indexOf(toState.name) > -1) {
        if (!MyUserService.isLoggedIn()) {
            // Prevent the state change from happening
            event.preventDefault();
            // Then redirect to our desired page
            $state.go('my-log-in-state-name');
        }
    }
});

You’ll need to place this code somewhere where it will only be executed once, for example not inside of a controller.

@aaronksaunders’s method is really cool too. I hadn’t thought of using resolve to check for the login status.

1 Like
8

I think @neilgoldman305 neilgoldman305 this isnt correct because it can couse loop for state change …