store data in Session using AngularJS

Question

I am learning AngularJS by creating a small application.

I am storing user information in sessionStorage at the time of successful login.

LoginController.JS

app.controller("LoginCntrl", function ($scope, $location, angularService) {

    $scope.Login = function () {
        var UserName = $scope.UserName;
        var Password = $scope.Password;

        var getData = angularService.LoginInformation(UserName,Password);
        getData.then(function (msg) {
            if (msg.data == '') {
                alert('no data');
            } else {
                sessionStorage.UserName = msg.dataUserName;
                $location.path('/members');
            }

        }, function (error) {
            alert('error in Login');
        });
    };
});

On successful login, I am redirecting the user to '/memberList' and in memberlistCntrl controller I am checking if sessionStorage is empty or not. If it is empty then I assume that user is trying to access the site without login and I am sending the user back to Login screen

Code in memberlistCntrl

app.controller("memberlistCntrl", function ($scope, $location, allMembers) {

    if (sessionStorage.length == 0)
    {
        $location.path('/login');
        return;
    }

    $scope.MembersList = allMembers.data;

    $scope.createmember = function (path) {
        $location.path(path);
    };
});

My questions,

Is it a right way to check if user is logged in or not?
Is sessionStorage the right object to store the data in "Session" so that i can access it through out all my pages or site?
Is there any better way to accomplish the same?

nalinc · Accepted Answer · 2015-06-26 11:12:17Z

6

My questions,

Is it a right way to check if user is logged in or not?

Is sessionStorage the right object to store the data in "Session" so that i can access it through out all my pages or site?

Well, it depends on your use-case. sessionStorage gets cleared when the page session ends. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated.

So, if you want your user to logout on opening another tab, you can continue using sessionStorgae. However, thats not the case in most of the sites(do you get logout from stackoverflow on opening a question in 'another tab' ?).

Is there any ~~better~~ other way to accomplish the same?

Yes. You can use localStorage or cookies. Stackoverflow keeps this information in a cookie named usr.

If you use chrome, open console(F12).

Go to Resources > Cookies and delete usr. Refresh the page and you'd be logged out.

Gmail, facebook uses a similar technique.

Now AngularJS provides $cookies service to get/set or remove cookies.

The reason why cookies are preferred over localStorage objects to track login status is: cookies are passed to server with each request/response cycle and hence available at server side. If you dont get the required cookie for a particular request, you can simply throw a status 401(Unauthorized) message.

answered Jun 26, 2015 at 11:12

nalinc

7,43327 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maheen Nasir Over a year ago

how to disbale the session in another tab of browser?

Alex P · Accepted Answer · 2015-06-26 11:17:51Z

0

I assume that you don't want to violate DRY principle and copy and paste code that checks authentication in each controller

if (sessionStorage.length == 0)
{
    $location.path('/login');
    return;
}

Instead try to use $routeChangeStart in one place to prevent user going to page if he is not authenticated.

Example of how to achieve this: http://fdietz.github.io/recipes-with-angular-js/urls-routing-and-partials/listening-on-route-changes-to-implement-a-login-mechanism.html

answered Jun 26, 2015 at 11:17

Alex P

961 silver badge5 bronze badges

Comments

Ronak Patel · Accepted Answer · 2015-06-27 05:06:52Z

0

Angular supports $cookieStore to store your values. please refer below example.

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
  // Put cookie
  $cookieStore.put('myFavorite','oatmeal');
  // Get cookie
  var favoriteCookie = $cookieStore.get('myFavorite');
  // Removing a cookie
  $cookieStore.remove('myFavorite');
}]);

Refrence : https://docs.angularjs.org/api/ngCookies/service/$cookieStore

OR - EDIT:

If you want to use sessionStorage for data-storage, Than you need to use $window.sessionStorage. Let me suggest you one example.

<a href="javascript:void(0)" ng-click="addItem('111')">Add item in session</a>

$scope.addItem = function(item){
    $window.sessionStorage.setItem(id,item);
}

edited Jun 27, 2015 at 5:06

answered Jun 26, 2015 at 10:56

Ronak Patel

3,4644 gold badges23 silver badges31 bronze badges

3 Comments

Dev Over a year ago

thanks for your answer, I will definitely look into $cookieStore. Am I doing the right thing by using sessionStorage or its just a mess? Is my approach valid?

Ronak Patel Over a year ago

sessionStorage is used in '$window' param. So use like $window.sessionStorage.setItem(id, 'Value');

Vinoth Over a year ago

how to retrieve that session value

Collectives™ on Stack Overflow

store data in Session using AngularJS

LoginController.JS

Code in memberlistCntrl

3 Answers 3

1 Comment

Comments

OR - EDIT:

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

LoginController.JS

Code in memberlistCntrl

3 Answers 3

1 Comment

Comments

OR - EDIT:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related