$location changes path even when user is logged in via Firebase

442 Views Asked by At

I am creating an upload page in my Angular (ui-router) & Firebase app and would like the upload page to only be available to users who are signed in. The idea is that if an anonymous (logged out/unregistered) user tries to access the upload URL example.com/upload, they will be sent to example.com/posts.

I tried to accomplish this by writing an if statement in my upload.ctrl.js controller that checks to see if a user is logged out and if the user is indeed logged out, I have Angular's $location service change the path to /posts which is the root url of my app like so:

if(Auth.logout) {
    $location.path('/posts');

    // Added the following line for feedback in console
    console.log('Auth.logout is true');
}

But if a user is logs in and navigates to /upload, the upload.tpl.html template will load fine but, the URL will be switched to /posts instead of /upload. This action is only supposed to happen if the user is logged out but, it is happening even if the user is logged in.

I see a clue in the line I added to the if statement which is console.log('Auth.logout is true');. I am not sure why but it gets called twice whenever I attempt to navigate to /upload while logged in or logged out. It seems that Auth.logout is always true and that is why the URL always is at /posts when I try to go to /upload.

I have created a Plunker that demonstrates this problem here

http://plnkr.co/edit/jx7xuyqxs3dPfQqTms6C?p=preview

You can launch it in a separate window to see the URL changes (or non-changes in this case).

To sign in you can use:

  1. email: [email protected]
  2. password: 1111

Any ideas on how to fix this issue? Thanks in advance.

NOTE:

To manually change the URL to end in /upload copy and paste http://run.plnkr.co/ZzrkWWeRl32wZsQ2/#/posts into a new browser tab when the Plunkr is running (the separate window they build for you does not allow you to change the URL) Once you have it running in a new tab you can manually change the URL to http://run.plnkr.co/ZzrkWWeRl32wZsQ2/#/upload (while logged in or logged out) to see how the URL will change back to http://run.plnkr.co/ZzrkWWeRl32wZsQ2/#/posts

UPDATE

I was able to solve this by changing the if statement condition like so

if(!Auth.user) {
    $location.path('/posts');
}

If Auth.user exists and is true then the user is authentic.


Files

upload.ctrl.js

app.controller('UploadCtrl', function ($scope, $stateParams, $location, Auth) {

        $scope.signedIn = Auth.signedIn;
        $scope.logout = Auth.logout;

        if(Auth.logout) {
            $location.path('/posts');
            console.log('Auth.logout is true');
        }
    });

auth.serv.js

app.factory('Auth', function ($firebaseSimpleLogin, FIREBASE_URL, $rootScope, $firebase) {
        var ref = new Firebase(FIREBASE_URL);
        var auth = $firebaseSimpleLogin(ref);

        var Auth = {
            login: function (user) {
                return auth.$login('password', user);
            },
            logout: function () {
                auth.$logout();
            },
            resolveUser: function() {
                return auth.$getCurrentUser();
            },
            signedIn: function() {
                return !!Auth.user.provider;
            },
            user: {}
        };

        $rootScope.$on('$firebaseSimpleLogin:login', function(e, user) {
            angular.copy(user, Auth.user);
            Auth.user.profile = $firebase(ref.child('profile').child(Auth.user.uid)).$asObject();

            console.log(Auth.user);
        });
        $rootScope.$on('$firebaseSimpleLogin:logout', function() {
            console.log('logged out');

            if(Auth.user && Auth.user.profile) {
                Auth.user.profile.$destroy();
            }
            angular.copy({}, Auth.user);
        });

        return Auth;
    });
1

There are 1 best solutions below

5
Radim Köhler On

There is updated working plunker

This was upload.ctrl.js before

if(Auth.logout) {
   // this is reason why it goes to posts
   $location.path('/posts');
   console.log('Auth.logout is true');
}

As we can see, the check is if(Auth.logout). And because logout is a function, this statement always returns true. And that means, that we always go to $location.path('/posts');

This is updated version, see the () at the end of logout: in the if(Auth.logout())

if(Auth.logout()) { // function call
   $location.path('/posts');
   console.log('Auth.logout is true');
}

Check it here