服务对象重置为F5刷新的默认值

Question

我的服务正常工作，但是如果我按F5（刷新），则authservice datauser值将重置为默认值（基本上是我给予服务中的数据使用者的值），即使有人登录了我成功地将其值设置为使用setValues函数（并在刷新之前正常工作）。导致此isloogedin false且无法访问任何路线，因为对于我在应用程序中的if语句

中

这是我的服务：

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
    }
}
})();

这是我的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');
      }
    });
  }
})();

希望我解释自己，英语是我的主要语言（对此很抱歉）。有帮助吗？谢谢btw

Answer 1

每次重置单页应用程序的状态时，每个angularjs服务/值也被重置。

因此，您需要依靠浏览器会话存储（或本地存储，但是，由于您需要存储与会话相关的数据，因此会话存储是一个更好的选择）。

像往常一样，最好寻找包含浏览器功能的AngularJS库（如有需要，如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
    };
  }
})();

Answer 2

这是我的服务代码

formTitle= new BehaviorSubject<string>("");
getFormTitle() {
    return this.formTitle;
}