Satellizer login JWT token is gone when page refresh

Question

I am using the Angular-satellizer extension for the login/register feature but I am stuck at number 7.

Token was saved to localStorage but I when refresh the page it's gone and $auth.isAuthenticated() function is returning false.

.controller('loginCtrl', function($scope, $state, $auth, jwtHelper) {
  $scope.login = function() {
    $auth.login($scope.user)
      .then(function(response) {
        var gelenToken = response.data;
        var tokenPayload = jwtHelper.decodeToken(gelenToken.token);
        console.log(JSON.stringify(tokenPayload)); // Output:{"sub":"1","iat":1496346513,"exp":1497556113,"data":{"role":"admin"}}
        localStorage.setItem('token', JSON.stringify(tokenPayload));
        $state.go('baba.manga');
      })
  };
})

Answer 1

You should try this :

localStorage.setItem('token', data.token);

OR

$window.localStorage.token = JSON.stringify(data.token);

to save your token, You can see the token in browser local Storage, You don't need to decode that token unless you need it to.

It should not get deleted on page refresh, If its getting deleted the I suggest you to try breakpoints at places and debug which part is clearing local storage.

Browser does not delete any localstorage data at any point, Your code might be doing it.

Answer 2

Maybe when you refresh the page , you are reseting the localStorage and your last token gone.

Try this

// if the localScore is not set then initialize it 
if(localStorage.getItem('token') === null) {
     localStorage.setItem('token', JSON.stringify(tokenPayload));
}