Geek Answers Handbook

Page refresh, causing the user to automatically log out of the system in angular js

I have a login API that I use in my service

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); } ); }

And in my html header I show the username at the top when it logs in 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>

and js file here

 (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; } } })();

and here I have one logging service where I defined the logInToService method

 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 (------){----}})();

The problem is that every time the user clicks the refresh button of the F5 page, the user logs out. Although I am trying to save data in localstorage, but in fact I am not getting a control flow.

+6
source share
2 answers

You are trying to save data in localStorage, but you are not reading it. In the currentUser variable, you have user data, this is a regular javascript variable that gets reset when the page reloads.

You need to do something like this:

 // ... // 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; },
+6
source

you need to create a login session so that it does not log out after refreshing the page. look at this link:

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

0
source

More articles:


All Articles