Angular Keep session alive Timeout management

Angular Keep session alive Timeout management

Today, We want to share with you Angular Keep session alive Timeout management.
In this post we will show you keep session alive timeout in angularjs example, hear for Handling session timeout in Angular we will give you demo and example for implement.
In this post, we will learn about Angular session timeout and management with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.keep session alive timeout in angularjs example

Generally, I want to learn and teach a good practice for this implementation(keep alive with secure) in my angularjs (application) web application.
here, I want to be able to display some greeting required login and logout button (means exit) for logged users in page,
even after the refresh(load ctrl + f5) the whole page details until they user logout or close the browser(mozila,chrome.etc..) and exit.
And to show in a page a “Sign in/Sign up” (login or registration form) button if the user login is not (login)authenticated yet.
so I need to use the same logic(logically) with some state is “private” states of my web application,

Keep session alive after a page refresh in AngularJS

for example:
if any user is not logged check and he accesses this url(route) account/options or any page route then he is forced (access data information) to log in in order to proceed and display info.

keep alive timeout – angularjs ng-idle example

app.js

 'use strict';

 //define custome parm
angular
  .module('saleswebapp', [
    'ngCookies',
    'ngResource',
    'ui.router',
  ])
  .run(
  [          '$rootScope', '$state', '$stateParams',
    function ($rootScope,   $state,   $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    }
  ]
)
  .config(['$stateProvider', function ($stateProvider) {

  /*
	now check authenticated or not in angularJS
  */

    $stateProvider
      .state('iniciodata', {
        url: '/',
        templateUrl: 'views/page_main.html',
        controller: 'SimpleMainCtrl',
      })
      .state('paneldata', {
        url: '/panelpage',
        title: 'angularjs session data get -',
        templateUrl: 'views/page_panel.html',
        controller: 'SalesPanelCtrl'
      })
      .state('logindata', {
        url: '/loginpage',
        title: 'keep angularjs session login page -',
        templateUrl: 'views/page_login.html',
        controller: 'SimpleLoginCtrl'
      });
  }]);

File name : Auth.js

'use strict';

angular.module('saleswebapp')
    .service('Auth', function($http) {
        return {
			// call function
          isLogged: function(cookieORsomethingElse){
            //check condition some magic sessionAlive true or false
            if (sessionAlive) {
				//session active
               return true;
            } else {
				//destroy Cookie here
               destroyOldCookieIfPresent();
               return false;
            }
          },
          login: function(credencial_data) {
		  //send request with authenticated
            return $http.post('http://api.infinityknow.com?index.php/login/', credencial_data);
          },
          logout: function() {
			//api call logout request
          },
          registro: function() {
			//api call regeter information send request server side
          }
        };
  });

[php]
  
<h3>file Name : Login.js</h3>

[php]

  'use strict';

angular.module('saleswebapp')
  .controller('SimpleLoginCtrl', function ($scope, Auth, $rootScope, $state) {

    $scope.credencial = {sales_servidor: 'infinityknow'};

    $scope.login = function() {
            Auth.login({
        s_user_id: $scope.credencial.sales_username,
        s_password: $scope.credencial.sales_password,
        s_server: $scope.credencial.sales_servidor
      }).success(function(data, status) {
		//retrive data information
        console.log(data, status);
        $state.go('paneldata');
      }).error(function() {
		//generate error log
        console.log('error: you suck');
      });
    };
  });