AngularJS unable to get auth object from service in a resolve function

Question

I need to fetch some data before allowing the page to render so that the page isn't empty for a second before showing the info. But I'm unable to get my resolve to work.

The issue is that the uid line throws an error because states.getAuth() is undefined. states.getAuth() should (and does) return authentication info about the user when using it from my controllers but when using it in this resolve it doesn't for some reason.

Am I going about this completely wrong? I have never had to do a resolve like this before so I wouldn't know so some guidance would be great.

Let me know if I have to include any of my services or if this route snippet is enough to figure out a solution.

.when('/programs/:program', {
  templateUrl: 'views/pages/single-program.html',
  resolve: {
    'isAuth': ['fbRefs', function(fbRefs) {
      return fbRefs.getAuthObj().$requireAuth();
    }],
    'programData': ['$route', 'fbRefs', 'states', function($route, fbRefs, states) {

      // Get our program key from $routeParams
      var key = $route.current.params.program;

      // Get unique user id
      var uid = states.getAuth().uid; // Throws error

      // Define our path
      var path = uid + '/programs/' + key;

      // Fetch the program from Firebase
      var program = fbRefs.getSyncedObj(path).$loaded();

      return program;
    }]
  }
})

Added states service code by request:

auth.service('states', [function() {

  var auth;

  return {
    getAuth: function() {
      return auth;
    },
    setAuth: function(state) {
      auth = state;
    }
  };
}]);

Be aware that a common answer to "i dont want to show half-rendered templates" is to display a scrim over the elements in question with a loading message, and hide the scrim programmatically after you have got your data — Plato
– Plato, Commented Jul 1, 2015 at 16:13
I think it would be helpful to include the code for the states service — jnishiyama
– jnishiyama, Commented Jul 1, 2015 at 16:14
@Plato I am aware of that but it would be more work than necessary in this scenario. Thanks for the tip though. — Chrillewoodz
– Chrillewoodz, Commented Jul 1, 2015 at 16:16
the auth returned by getAuth is undefined and so will not have a uid property, try var auth = {uid: null} or otherwise set auth.uid before you try and resolve. I usually do something like var auth = $('body').data('myJsonTokenAttribute') with <body data-myJsonTokenAttribute="{}"> (be aware this could be MITM'd if you dont use SSL) — Plato
– Plato, Commented Jul 1, 2015 at 16:20

Tong Shen · Accepted Answer · 2015-07-01 16:22:50Z

1

You are using the 'Service Recipe' to create the states service, but returning like a 'Factory Recipe'.

According to the doc: https://docs.angularjs.org/guide/providers#service-recipe

You should either use this:

auth.factory('states', [function() {

  var auth;

  return {
    getAuth: function() {
      return auth;
    },
    setAuth: function(state) {
      auth = state;
    }
  };
}]);

Or this:

auth.service('states', [function() {

  var auth;

  this.getAuth = function() {
      return auth;
  };

  this.setAuth = function(state) {
      auth = state;
  };
}]);

answered Jul 1, 2015 at 16:22

Tong Shen

1,3669 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chrillewoodz Over a year ago

I still get undefined.

Tong Shen Over a year ago

@Chrillewoodz Can you try to create a fiddle or something? Or could you console.log() your states to see what actually happens?

Collectives™ on Stack Overflow

AngularJS unable to get auth object from service in a resolve function

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related