javascript - 使用本地存储来存储 AngularJS 数据

Question

我目前正在使用 $rootScope 来存储用户信息以及用户是否登录。我尝试使用 $window.localStorage，但没有成功.我的目标是让我的导航栏中的项目在用户登录后通过 ng-show 显示，让他们的用户名出现在导航栏、个人用户配置文件 View 、所有用户 View 等中。我需要持久登录。我的导航栏与 $rootscope 一起工作，但每当我尝试转换到 $window.localStorage 时，它都会失败。下面是使用 $rootScope 的代码:

主模块

angular.module('mainModule', [
        'ui.router',
         ...
    ])
    .config(configFunction)
    .run(['$rootScope', '$state', 'Auth', function($rootScope, $state, Auth) {
        $rootScope.$on('$stateChangeStart', function(event, next) {
            if (next.requireAuth && !Auth.getAuthStatus()) {
                console.log('DENY');
                event.preventDefault();
                $state.go('login');
            } else if (Auth.getAuthStatus() || !Auth.getAuthStatus()) {
                console.log('ALLOW');
            }
        });
    }]);

授权工厂

angular.module('authModule').factory('Auth', ['$http', '$state', function authFactory($http, $state) {
        var factory = {};

        var loggedIn = false;
        var userData = {};

        factory.getAuthStatus = function() {
            $http.get('/api/v1/auth')
                .success(function(data) {
                    if (data.status == true) {
                        loggedIn = true;
                    } else {
                        loggedIn = false;
                    }
                })
                .error(function(error) {
                    console.log(error);
                    loggedIn = false;
                });
            return loggedIn;
        }

        return factory;
    }]);

登录 Controller

function SigninController($scope, $rootScope, $http, $state) {
    $scope.userData = {};

    $scope.loginUser = function() {
        $http.post('api/v1/login', $scope.userData)
            .success((data) => {
                $scope.userData = data.data;
                $rootScope.loggedIn = true;
                $rootScope.userData = data;
                $state.go('home');
            })
            .error((error) => {
                console.log('Error: ' + error);
            });
    };
}

导航 Controller

function NavbarController($scope, Auth) {
    $scope.loggedIn = Auth.getAuthStatus();
}

编辑编辑编辑

这是我使用本地存储的方式。这些是唯一改变的事情。

登录 Controller

function SigninController($scope, $window, $http, $state) {
    $scope.userData = {};

    $scope.loginUser = function() {
        $http.post('api/v1/login', $scope.userData)
            .success((data) => {
                $scope.userData = data.data;
                $window.localStorage.setItem('userData', angular.toJson(data));
                $window.localStorage.setItem('loggedIn', true);
                $state.go('home');
            })
            .error((error) => {
                console.log('Error: ' + error);
            });
    };
}

授权工厂

angular
    .module('authModule')
    .factory('Auth', ['$http', '$window', '$state', function authFactory($http, $window, $state) {
        var factory = {};

        factory.getAuthStatus = function() {
            $http.get('/api/v1/auth')
                .success(function(data) {
                    if (data.status == true) {
                        $window.localStorage.setItem('loggedIn', true);
                    } else {
                        $window.localStorage.setItem('loggedIn', false);
                    }
                })
                .error(function(error) {
                    console.log(error);
                    $window.localStorage.setItem('loggedIn', false);
                });
            return $window.localStorage.getItem('loggedIn');
        }

        return factory;
    }]);

Answer 1

我发现您对 localStorage.getItem('loggedIn') 的使用存在潜在问题。

因为 localStorage 只存储字符串，你得到的实际上是你输入的 bool 值的字符串化版本。如果字符串 'false' 被返回，你的检查 !Auth例如，主模块中的 .getAuthStatus() 将始终评估为 bool 值 false，因为 JavaScript 中的任何非空字符串都是“真实的”。

即!'false' === false(与 !true === false 相同)

您可以通过对 localStorage 中的值使用 JSON.parse 来解决这个问题。例如JSON.parse(localStorage.getItem('loggedIn')) 会将字符串 'false' 解析为 bool 值 false。