Question

我的服务工作正常但是如果我按f5（刷新），authservice dataUser值会重置为默认值（基本上是我给服务中的dataUser的值），即使有人成功登录我用setValues函数设置它们的值（并在刷新前正常工作）。导致这是因为错误而无法访问任何路由，因为对于app js中的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;
}

服务对象在f5刷新时重置为默认值

2 个答案: