頁面刷新導致用戶在角度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;
},

Answer 2

您需要創建一個登錄會話，以便在頁面刷新后不會注銷。 看看這個鏈接：

http://maffrigby.com/maintaining-session-info-in-angularjs-when-you-refresh-the-page/