vantesllar vantesllar - 27 days ago 18
AngularJS Question

Meteor.user() undefined when refreshing using angular ui-router and alanning:roles

I came into an issue when developing an app using meteor, angular, and the packages ui-router and alanning:roles. Inside a component, I wan't a particular route to be available only for logged in users under certain roles, so I configure a component with the following function:

function config($stateProvider) {
'ngInject';

$stateProvider.state('customers', {
url: '/customers',
template: '<customer-list></customer-list>',
resolve: {
currentUser($q) {
const userId = Meteor.userId();
if (userId && Roles.userIsInRole(userId, ['admin'])) {
console.log('customers.USER_REJECTED');
return $q.reject('AUTH_REQUIRED');
} else {
console.log('customers.USER_ALLOWED');
return $q.resolve();
}
}
}
})
}


It works nicely but when I refresh the page, case in which the user, following the logic I have implemented, is then not allowed to access the route, even if he is actually logged in. If then I manually go to /customers, the user is still not allowed to enter, but if I go to other url where the only requirement is to be logged in, the user is allowed to enter. I have checked that when I refresh the page, Meteor.user() returns undefined, so I suppose that's why the checking for the role is returning false. I've checked several solutions proposed in this community, but I can't make work any of them. Could you please give me a hand?

Many thanks.

Answer

It's a timing issue, it takes a moment for the user record to be loaded, and the route fires before it's done.

Have look at this answer, it shows a way that I use to make sure that the user record is fully loaded before the route resolves.

Meteor - Call function before state loaded using ui-router

Comments