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:
- 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>
- 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>
- 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.
About Author
