sameera207 sameera207 - 3 months ago 24
AngularJS Question

retain angular variables after page refresh

I'm trying to figure out a way to keep my

angular
variables with page refresh / across controllers. My workflow is,


  • user logs in via facebook and gets an access token

  • users access token will be used with every request



I tried two ways,

1 - Assigning the token to a
rootScope

Not working

2 - By using a
factory


#app.js
'use strict';

angular.module('recipeapp', [])
.run(['$rootScope', '$injector', 'Authenticate', function($rootScope,$injector, Authenticate){
$injector.get("$http").defaults.transformRequest = function(data, headersGetter) {
$injector.get('$http').defaults.headers.common['auth-token'] = Authenticate.getToken();
}
}]);

#factory
'use strict';
angular.module('recipeapp')
.factory('Authenticate', function(){
var factory = {};
var accessToken = "";

factory.setToken = function(token) {
accessToken = token;
}
factory.getToken = function() {
return accessToken;
}

return factory;

})

#facebook controller
I set the the token with every successful login
Authenticate.setToken(data.app_token);


But the problem is, If I refresh the page,
Authenticate.getToken()
becomes blank. I'm pretty new to
angular
and cannot figure out a way to retain my data after a page refresh

any help would be much appreciated

Answer

You can use localStorage. It is really easy to use.

var token = "xxx";
localStorage.setItem("token", token);
localStorage.getItem("token"); //returns "xxx"