サービスオブジェクトはf5でデフォルトにリセットされます。リフレッシュ

Question

サービスが正常に機能していますが、f5（リフレッシュ）を押すと、authservice dataUserの値がデフォルトにリセットされます（基本的にはサービス内のdataUserに私はsetValues関数で値を設定しました（そして、リフレッシュの前に正しく動作しています）。

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

です：私のアプリのjsファイル内のステートメント

ここでは私のサービスである場合のためにあるため、このisLoogedIn偽とカントのアクセスに任意の経路を引き起こし

私は自分自身を説明し、私の主な言語を英語で話したいと思っています（申し訳ありません）。 ヘルプがありますか？ありがとうbtw

Answer 1

シングルページアプリケーションの状態をリセットするたびに、すべてのAngularJSサービス/値もリセットされます。

したがって、ブラウザのセッションストレージ（またはローカルストレージですが、セッション関連のデータを保存する必要があるため、セッションストレージが適しています）に依存する必要があります。

いつものように、ngStorageのようなブラウザ機能（必要に応じてフォールバック付き）をラップするAngularJSライブラリを探す方がよいでしょう。

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

})();