离子$ location.path（）可在浏览器中使用，但不能在设备上使用

Question

So, I have the following code that all works in the browser but for some reason keeps redirecting me back to login on the actual Android device.

controllers.js

App.controller('LoginController', ['$scope', 'RequestService', '$location', 'OpenFB', '$rootScope', function($scope, RequestService, $location, OpenFB, $rootScope) {

    $scope.provider = '';

    $scope.loginFacebook = function() {

        $scope.provider = 'facebook';

        OpenFB.login('email, user_friends').then(
            function () {
                OpenFB.get('/me').success(function (user) {
                    localStorage.setItem('fbuser', JSON.stringify(user));
                });

                localStorage.setItem('provider', 'facebook');

                RequestService.get($scope.baseUrl + 'user')
                    .success(function(data, status, headers, config){

                        $scope.user = data;

                        //Set our logged in var
                        localStorage.setItem('loggedIn', true);

                        // Check if the user has accepted EULA
                        if($scope.user.eula == 0) {
                            $location.path('/eula');
                        }
                        else
                        {
                            //TODO:Redirect to the users dashboard, when we have the routes.
                            console.log('EULA Accepted, Redirect somewhere else!');
                        }

                    });
            },
            function (error) {
                localStorage.removeItem('loggedIn');
            });
    };

}]);

I have debugged the above and everything is working as it should, once FB is logged in, it queries the database, sets the user up with the data scraped from Facebook and then checks that data to see if the EULA has been accepted. If not then is should redirect to $location.path('/eula');

routes

.config(function($httpProvider, $stateProvider, $urlRouterProvider) {

    $httpProvider.interceptors.push('httpRequestInterceptor');

    $urlRouterProvider.otherwise('/');

    $stateProvider

    .state('login', {
        url: '/',
        templateUrl: 'templates/login.html',
        data: {
            requireLogin: false
        }
    })

    .state('eula', {
        url: '/eula',
        templateUrl: 'templates/eula.html',
        data: {
            requireLogin: true
        }
    })

        .state('accept', {
            url: '/accept',
            templateUrl: 'templates/accept.html',
            data: {
                requireLogin: true
            }
        })
});

Answer 1

as you are using ui-router (standard of ionic), you shall use states.

Replace : $location.path('/eula'); by $state.go('eula'); (and correspondign injected dependency)

Answer 2

Youre problem seems to have something to do with the execution.
OpenFB does not implement promises.

Look at these lines:

OpenFB.get('/me').success(function (user) {
    localStorage.setItem('fbuser', JSON.stringify(user));
});

localStorage.setItem('provider', 'facebook');

It might take a while before OpenFB.get returns the result, but your code will execute the following instructions anyway, so you might find yourself in a situation where you're calling:

RequestService.get($scope.baseUrl + 'user')

before OpenFB.get('/me') has finished it's execution.

The best solution is to use ngOpenFB which implement promises: $q promises.
There's a sample here .

Your code should be implemented like this:

ngFB.login({scope: 'email, user_friends'})
    .then(function(response){
        // response.authResponse.accessToken
        return ngFB.api({path: '/me'});
    })
    .then(function(user){
        localStorage.setItem('fbuser', JSON.stringify(user));
        localStorage.setItem('provider', 'facebook');
        RequestService.get($scope.baseUrl + 'user')
            .success(function(data, status, headers, config){
                $scope.user = data;

                //Set our logged in var
                localStorage.setItem('loggedIn', true);

                // Check if the user has accepted EULA
                if($scope.user.eula == 0) {
                    return false;
                } else
                {
                    return true;
                }
            })
            .error(function (data, status, headers, config) {
                return false;
            })
    })
    .then(function(eulaAccepted){
        if (eulaAccepted)
        {
            $state.go('eula');
        }
    })
    catch(function(reason){
        localStorage.removeItem('loggedIn');
    });

Each call returns a promise and they can be nested. The second .then( gets the result of the second promise (when it's been resolved) ngFB.api({path: '/me'}) .
Since that call returns a promise with the object user, you'll be able to read it in the function.

This code:

if($scope.user.eula == 0) {
     return false;
} else
{
    return true;
}

does not return a promise but it's ok with this type of syntax.

In the third .then( :

.then(function(eulaAccepted){
    if (eulaAccepted)
    {
        $state.go('eula');
    }
})

you'll be able to read the value of the previous statement (eula).

Mind you, I haven't tested this code cause I don't have facebook, but the advantage of promises is to avoid indefinite levels of nested code

Answer 3

Ok so solved the issue, in my login check in the .run() method of my app I had a miss placed 'event.preventDefault();' call, once this was moved the works on both the desktop browser and on my device.