Question

我能够登录，注销并显示来自localStorage的登录用户信息，但是如果我使用不同的用户应用程序注销并再次登录，则显示以前用户的信息！这不应该发生，因为我可以在localStorage中看到新的用户数据。如果我手动刷新页面，新数据会正确显示！

我需要此应用才能显示当前登录的用户数据，因为它已在localStorage中提供..

routes.js

angular.module('app.routes', [])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('menu', {
    url: '/side-menu',
    templateUrl: 'templates/menu.html',
    controller: 'menuCtrl'
  })

  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'loginCtrl'
  })

  .state('menu.welcome', {
    url: '/welcome',
    views: {
      'side-menu21': {
        templateUrl: 'templates/welcome.html',
        controller: 'welcomeCtrl'
      }
    }
  })

$urlRouterProvider.otherwise('/user-type')

});

登录在这里，我通过Web服务对用户进行身份验证，该服务以JSON格式发回用户对象，该用户对象存储在localStorage中，其中包含密钥＆＃39; user＆＃39;它工作正常。

.controller('loginCtrl', ['$scope', '$stateParams', '$state', '$http', 
    function ($scope, $stateParams, $state, $http) {
        $scope.user = {
            username: '',
            password: ''
        };
        $scope.login = function(){
            var apiUrl = "...";
            return $http.post(apiUrl, $scope.user).then(function(response){
                window.localStorage.setItem('user', angular.toJson(response.data));
                $state.go('menu.welcome');
            });
        };
    }
])

注销： 在这里，我通过删除用户＆＃39;来注销用户来自localStorage的JSON对象，并将他重定向回登录状态，并且工作正常。

.controller('menuCtrl', ['$scope', '$stateParams', '$state', 
    function ($scope, $stateParams, $state) {
        $scope.user = angular.fromJson(window.localStorage.getItem('user'));
        $scope.logout = function(){
            // here i'm removing user from localStorage
            window.localStorage.removeItem('user');
            $state.go('login');
        };
    }
])

菜单： 在这里，我显示了从＆＃39; menuCtrl＆＃39;发送的用户信息。（即使它在localStorage中可用，它也没有更新登录用户的数据）

<h3 id="menu-heading1" class="left-menu-headings">{{user.first_name}} {{user.last_name}}</h3>
<h4 id="menu-heading2" class="left-menu-headings">{{user.email}}</h4>

我已尝试在注销功能中执行以下操作但未成功：

$window.localStorage.clear();
$ionicHistory.clearCache();
$ionicHistory.clearHistory();

知道它为什么不显示localStorage的当前数据？

Answer 1

我根据您的控制器名称猜测，＆＃34; menuCtl＆＃34;实际上是通过重新生成，所以它永远不会重新初始化。你应该在

周围添加一些console.logs

$scope.user = angular.fromJson(window.localStorage.getItem('user'));

当你重新登录时，看它是否第二次被召唤。如果没有，您可以有许多选项可供遵循，例如，向控制器添加事件侦听器，以及在登录/注销时广播事件，以便控制器刷新其范围数据。

Answer 2

使用$ rootScope：

这个问题主要是由于menuController被视图共享而没有被重新加载，在这种情况下，您可以使用$rootScope.user，$scope.user与所有控制器共享，使用如下：

退出控制器

.controller('menuCtrl', ['$scope', '$stateParams', '$state', 
function ($scope, $stateParams, $state, $rootScope) { // <-- add $rootScope

    // use $rootScope.user instead of $scope.user
    $rootScope.user = angular.fromJson(window.localStorage.getItem('user'));

    // rest of your code is fine.
    $scope.logout = function(){
        // here i'm removing user from localStorage
        window.localStorage.removeItem('user');
        $state.go('login');
    };
 }

登录控制器

.controller('loginCtrl', ['$scope', '$stateParams', '$state', '$http', 
    function ($scope, $stateParams, $state, $http, $rootScope) { // <-- add $rootScope
        // $scope.user = { <-- change to $rootScope
        $rootScope.user = {
            username: '',
            password: ''
        };

        $scope.login = function(){
            var apiUrl = "...";
            return $http.post(apiUrl, $rootScope.user).then(function(response){
                window.localStorage.setItem('user', angular.toJson(response.data));
                // update $rootScope.user:
                $rootScope.user =  angular.fromJson(window.localStorage.getItem('user'));
                $state.go('menu.welcome');
            });
        };
    }
])

Answer 3

清空或删除$ scope.user

.controller('menuCtrl', ['$scope', '$stateParams', '$state', '$window',
function ($scope, $stateParams, $state) {
    $scope.user = angular.fromJson(window.localStorage.getItem('user'));
    $scope.logout = function(){
        // here i'm removing user from localStorage
        $window.localStorage.removeItem('user');
        $state.go('login');

        delete $scope.user;

        /*or $scope.user = {}*/

    };

    $scope.login = function(){
        var apiUrl = "...";
        return $http.post(apiUrl, $rootScope.user).then(function(response){
            $window.localStorage.setItem('user', angular.toJson(response.data));
            // update $rootScope.user:
            $rootScope.user =  angular.fromJson($window.localStorage.getItem('user'));
            $state.go('menu.welcome');
        });
    };
}
])

Answer 4

使用离子视图输入来定义您的用户

$scope.$on( "$ionicView.enter", function( scopes, states ) {
        $scope.user = angular.fromJson(localStorage.get("user"));
    });

从控制器声明中删除该集。这将使用户每次进入时都会加载，而不是每次控制器初始化时

如何显示localStorage的当前数据？

4 个答案:

使用$ rootScope：