R.Romero R.Romero - 1 year ago 171
AngularJS Question

Service object resets to default on f5 refresh

My service is working correctly but if I press f5(refresh), authservice dataUser values resets to default (basically to the values i give to dataUser in the service) even though when someone logs in successfully i set their values with setValues function (and working correctly before a refresh). Causing this isLoogedIn false and cant access any route, because for my if statement in app js

Here is my service:

function(){
angular.module('statusTrackAppApp').service('authService',authService);

function authService(){

var dataUser={
isLoggedIn:false,
username:null,
firstname:null,
role:null
};

function setValues(isLoggedIn,data){
dataUser.isLoggedIn=isLoggedIn;
dataUser.username=data.username;
dataUser.firstname=data.firstName;
dataUser.role=data.role;
};

function getValues(){
return dataUser;
};

return{
setValues:setValues,
getValues:getValues
}
}

})();


This is my app.js

(function () {
'use strict';

angular
.module('statusTrackAppApp', [
'angular-jwt',
'ui.router',
'datatables',
'ngModal',
'ngFileUpload',
])
.run(run)
.config(function ($httpProvider,$stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'loginController',
controllerAs:'loginController',
authenticate:false
})
.state('accessDenied', {
url: '/accessDenied',
templateUrl: 'views/accessDenied.html',
authenticate:false
}
.state('retenciones',{
url:'/retenciones',
templateUrl: 'views/retenciones.html',
controller: 'retencionesController',
controllerAs:'retencionesController',
authenticate:true
});
$urlRouterProvider.otherwise('/login');
})
.value('apiPath','http://localhost:3000/api/');

function run($rootScope,$state,authService) {
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {

//if I press f5 i redirect to the login page because isLoggedIn becomes false, basically because dataUser.isLoggedIn resets to default, though it was originally true when someone logged in


if (toState.authenticate && !authService.getValues().isLoggedIn) {
event.preventDefault();
$state.transitionTo('login');
}
if(toState.role && (!toState.role.includes(authService.getValues().role))){
event.preventDefault();
$state.transitionTo('accessDenied');
}
});
}
})();


Hope I explained myself, english its noy my main language (sorry for that).
Any help? Thanks btw

Answer Source

Every time you reset the state of your Single Page Application, every AngularJS Service/Value is reset as well.

So, you need to rely on browser Session Storage (or Local Storage, but, since you need to store session-related data, Session Storage is a better choice).

As usual, it is better to look for an AngularJS library that wraps browser capabilities (with fallbacks, if needed), like ngStorage.

function() {
  angular
    // add dependency
    .module('statusTrackAppApp', ['ngStorage'])
    .service('authService', authService);

  // inject the appropriate storage service
  function authService($sessionStorage) {

    // load data
    var dataUser = $sessionStorage.dataUser || {
      isLoggedIn: false,
      username: null,
      firstname: null,
      role: null
    };

    function setValues(isLoggedIn, data) {
      dataUser.isLoggedIn = isLoggedIn;
      dataUser.username = data.username;
      dataUser.firstname = data.firstName;
      dataUser.role = data.role;
      // save data
      $sessionStorage.dataUser = dataUser;
    }

    function getValues() {
      return dataUser;
    }

    return {
      setValues: setValues,
      getValues: getValues
    };
  }

})();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download