Example 5: Client Login / Logout With $http.post()

This example will show you how to post data to Restful server by using $http.post() in order to demonstrate login and logout functions. Besides, it will use window.localStorage to store the login information. Please follow below steps:

1. Update C:\workspace_ionic\itBlogsApp\www\templates\menu.html by changing:

<ion-item menu-close ng-click=”login()”>Login</ion-item>

to

<ion-item menu-close ng-click=”login()”>{{loginout}}</ion-item>

 

2. Update C:\workspace_ionic\itBlogsApp\www\templates\login.html by changing:

<h1 class=”title”>Login</h1>

to

<h1 class=”title”>Login <font color=”red”>{{msg}}</font></h1>

 

3. Update C:\workspace_ionic\itBlogsApp\www\js\controllers.js by changing ‘AppCtrl’ as:

.controller(‘AppCtrl’, function($scope, $http, $ionicModal, $timeout) {

  // With the new view caching in Ionic, Controllers are only called

  // when they are recreated or on app start, instead of every page change.

  // To listen for when this page is active (for example, to refresh data),

  // listen for the $ionicView.enter event:

  //$scope.$on(‘$ionicView.enter’, function(e) {

  //});

  // Form data for the login modal

  $scope.loginData = {};

  // Create the login modal that we will use later

  $ionicModal.fromTemplateUrl(‘templates/login.html’, { scope: $scope }).then(function(modal) {

                                $scope.modal = modal;

  });

  // Triggered in the login modal to close it

  $scope.closeLogin = function() {

                                $scope.modal.hide();

  };

  // Open the login modal

  $scope.login = function() {

                                if(window.localStorage.getItem(“login”) !== null) {

                                                $scope.doLogout();

                                } else {

                                                $scope.msg = ”;

                                                $scope.loginData.username = ”;

                                                $scope.loginData.password = ”;

                                                $scope.modal.show();

                                }

  };

  // Perform the login action when the user submits the login form

  $scope.doLogin = function() {

                                console.log(‘Doing login’, $scope.loginData);

                                // send login data

                                $http({

                                                method: ‘POST’,

                                                url: ‘http://localhost:8080/SpringRestfulExample/customer/login’,

                                                data: ‘username=’+$scope.loginData.username+’&password=’+$scope.loginData.password,

                                                headers: {‘Content-Type’: ‘application/x-www-form-urlencoded’}

                                }).success(function (data, status, headers, config) {

                                                // handle success things

                                                console.log(‘AppCtrl doLogin success…’, status);

                                                $scope.msg = ‘Successful’;

                                                //setting session here

                                                window.localStorage.setItem(“login”, $scope.loginData.username);

                                                $scope.loginout = “Logout”

                                                $scope.closeLogin();

                                }).error(function (data, status, headers, config) {

                                                // handle error things

                                                console.log(‘AppCtrl doLogin error…’, status);

                                                $scope.msg = ‘Failed’;

                                });

  };

  // Perform the logout action

  $scope.doLogout = function() {

                                console.log(‘Doing logout’);

                                $scope.loginout = “Login”

                                window.localStorage.removeItem(“login”);

  };

                //Setting default one

                if(window.localStorage.getItem(“login”) !== null) {

                                $scope.loginout = “Logout”

                } else {

                                $scope.loginout = “Login”

                }

})

 

Done, let’s try to refresh the browser, and click on “Login” menu:

 

It will show you the login popup page:

 

Just simply click on “Log in” button, it will show you “Login Failed”:

 

Let’s try entering “peterpan” as username and “peterpan” as password, and click on “Log in” button again, it will make $http.post request to the Restful server, and return with status=200. window.localStorage will set an item “login” with username. Then, the login popup page will be hide, please check again the menu:

 

It will show you “Logout” instead of “Login” now. Let’s try to logout, and see what happen, window.localStorage will remove the item “login” and the menu will resume to:

 

Cong!!! It’s done.