Logout Page in AngularJS

Question

I am facing an issue with logout page.when logout option is clicked from a page, the login page has to be loaded and even when the user tries to click previous page arrow in browser, only the login page has to be displayed. I have tried using $window.location.reload();andsessionStorage.clear(); which didnt give the solution.

Right now I have logout page which displays login page but when back page is clicked all the details of previous logged in user are available. Below is the code:

index.html:

<body ng-app="app">
 <div class=" ">
    <div ui-view></div>
 </div>
</body>

login.html:

 <form ng-submit=submit()>
   <input type="text" name="username" placeholder="Username" ng-model="person.firstName" required />
   <input type="password" name="pswd" placeholder="Password" ng-model="person.pswd" required />
       <div class="submit">
          <input type="submit" value="LOGIN">
        </div>
  </form>

page.html:

<ul>
 <li><a ui-sref="logout">Logout</a></li>
</ul>

app.js:

var app = angular.module('app', ['ui.bootstrap', 'LocalStorageModule']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
          .state('page', {
             url: '/page/:id',
            templateUrl: 'page.html'
               })
         .state('login', {
             url: '/login',
             templateUrl: 'login.html',
             controller: 'LoginCtrl'
         })
         .state('tab', {
          url: '/tab/:id',
         templateUrl: 'views/tab.html'
            })
     .state('logout', {
         url: '/logout',
         templateUrl: 'logout.html',
         controller: 'LogoutCtrl'
     });
     });
app.controller('LogoutCtrl', function ($scope, $http, $location, $state) {
sessionStorage.clear();
$location.path('/login');
//this is loading login page, but if back arrow is clicked previous logged in details are present//
});
app.controller('LoginCtrl', function ($scope, $http, $location, $state) {
  $scope.submit = function () {
      $http.get("url" + $scope.Name + "&Password=" + $scope.pswd)
       .success(function (data, status, headers, config) {
           debugger
           $scope.tableData = data;
           console.log(data)
           if (data == 'Exception') {
               window.alert('You have entered wrong username or password');

           }
           else $state.go('tab', { id: data.Table[0].UserId });
       })

}
});

In brief what I need is: After logging out, login page has to be displayed and if user tries to go to back page, then also login page alone has to be displayed.

Would be grateful if anyone can help.

Could you please post the code of `LogoutCtrl`? how are you storing the userDetails? in cookies or local/session Storage? how are you clearing these details upon logout? and are you implementing a check on route(or in your case, state) change? — Mridul Kashyap, Jul 22 '16 at 10:38
@MridulKashyap: The page.html is user based and will be different for different users. I use the login details to display page.html and I didn't use anything to store the user details. — Deborah, Jul 22 '16 at 10:45

score 0 · Answer 1 · edited May 23 '17 at 10:34

You'll need to store the login details in someplace, let's say cookie or localStorage or SessionStorage. and check if the login details are present on the page the user needs to be logged in to access. you can even set a flag like loggedIn or simply use the loginId/UserName. if it's present, you show the login page. if not, you redirect the user to login page. How you can check if a user is logged in or not? you can use angular's stateChangeStart event. check if the loginId/UserName or the flag you set is present. if yes, continue. if not, redirect to login.

upon logout, you clear these details from storage.

refer to this Link which will help you in storing the user details in local storage.

Vikash Kumar · Answer 2 · 2016-07-29T07:04:44.893

0

<script src="bower_components/js/angular-local-storage.min.js"></script>
...
<script>
    var myApp = angular.module('myApp', ['LocalStorageModule']);

Inject localsotrage module and create a localstorage and make a condition in main controller to make sure that if localstorage exist then move towards main page or else go back to login page. And when you logout you can use

localStorageService.remove(key); to clear everything

in your controller

myApp.controller('MainCtrl', function($scope, localStorageService) {
 var lsKeys = localStorageService.keys();//to show all values
function submit(key, val) {
return localStorageService.set(key, val);  }
function removeItem(key) {
  return localStorageService.remove(key); }
  });

edited Jul 29 '16 at 07:04

answered Jul 22 '16 at 10:54

Vikash Kumar

1,712
1
11
17

Sorry for late reply.. I have tried with your suggestion but it didn't work. How can i check the local storage existence in my login controller, I have updated login controller in the question. Please check it once and let me know how to implement local storage here. – Deborah Jul 29 '16 at 06:48
What do you mean by `MainCtrl`? is it LoginCtrl? or the controller I have in tab.html?? – Deborah Jul 29 '16 at 07:26

Logout Page in AngularJS

2 Answers2