javascript - 页面刷新导致用户在angular js中自动注销

Question

我有一个登录 API，我正在我的服务中使用它

function logInToService(callback, errback, login, password, rememberLogin) {
            var url = "User/Login";

            var authorizationHeader = {'Authorization': "Basic " + login + ":" + password};
            httpWrapperService.post(url, {login: login, password: password}, authorizationHeader).then(
                function success(loginToken) {
                    // transform data here

                    self.currentUser.emailAddress = login;
                    self.currentUser.password = password;
                    // store token in a cookie
                    self.currentUser.token = loginToken;
                    $rootScope.currentUser = self.currentUser;


                    if (rememberLogin) {

                        localStorage.userName=login;
                        localStorage.password=password;
                    }

                    httpWrapperService.setAuthenticationToken(loginToken);
                    callback(loginToken);
                },
                function error(errorObject) {
                    errback(errorObject);
                }
            );
        }

在我的标题 html 中，当他登录时，我在顶部显示用户名 Header.html

 <div class="header-user-menu">
        <div ng-show="isUserLoggedIn() == false ">
            <a href="" ng-click="$state.go('app.sr.login')" class="">{{'HEADER.LOGIN' | translate}}</a>
            <!--<a ui-sref="app.sr.login" class="">{{'HEADER.LOGIN' | translate}}</a>-->
        </div>
        <div ng-show="isUserLoggedIn()" class="userName">{{'HEADER.WELCOME' | translate}} {{currentUser.emailAddress}}</div>

    </div>

js文件在这里

(function() {
    'use strict';

    angular
        .module('safe-repository')
        .controller('AppLayoutCtrl', appLayoutCtrl);

    // Implementation of controller 
    appLayoutCtrl.$inject = ['$rootScope', '$scope'];

    function appLayoutCtrl($rootScope, $scope) {


        $scope.isUserLoggedIn = isUserLoggedIn;

        function isUserLoggedIn() {
            if ($rootScope.currentUser
                && $rootScope.currentUser.emailAddress != null
                && $rootScope.currentUser.emailAddress != '') {
                return true;
            }
            return false;
        }

    }
})();

这里我有一个注册服务，我在其中定义了 logInToService 方法

function registrationService($rootScope, httpWrapperService, $modal, $state, $cookieStore) {
        var self = this;
        // expose functions
        self.hasUserAccessToLevel = hasUserAccessToLevel;
        self.logInToService = logInToService;
        self.getCurrentUserToken = getCurrentUserToken;
        self.showRegistrationViewForLevel = showRegistrationViewForLevel;
        self.currentUser = {
            //emailAddress: '',
            //password: '',
            //token: ''
        }

        $rootScope.currentUser = null;
        self.currentUserToken = null;

 function logInToservice (------){----}})();

问题是每次当用户按下页面刷新 F5 时，用户都会被注销。尽管我试图将数据存储在 localstorage 中，但实际上我没有获得控制流。

Answer 1

您正在尝试将数据保存到 localStorage 中，但您没有读取它。 您拥有用户数据的 currentUser 变量是一个常规的 javascript 变量，它会在您重新加载页面时重置。

你需要做这样的事情:

// ...
// user logs in, remember it into the local storage
// Note: is is better to use it via $window.localStorage
$window.localStorage.setItem('user', JSON.stringify(user));
this.currentUser = user;

//...
// function to get the user, if this.currentUser is not set,
// try to load from the local storage
getUser: function() {
  if (this.currentUser) {
      return this.currentUser;
  }
  var storageUser = $window.localStorage.getItem('user');
  if (storageUser) {
    try {
      this.user = JSON.parse(storageUser);
    } catch (e) {
      $window.localStorage.removeItem('user');
    }
  }
  return this.currentUser;
}

// you may also want to remove the user data from storage when he logs out
logout: function() {
    $window.localStorage.removeItem('user');
    this.currentUser = null;
},