How to handle user sign out / local storage modifications

ionic-v1
1

I’m storing an auth token in local storage (LocalStorageModule) that I delete upon sign out. This is working correctly. However, if I sign in with another user successfully the auth token from the previous user will be used by my angular service instead of the new one.

Normally, in angular projects I get around this issue by calling:

$window.location = '/';

which results in a browser refresh.

This seems to work correctly in Chrome with an ionic project, but in the ios emulator I’m not seeing a refresh which results in the wrong auth token sent with api requests. How can I do the equivalent of a hard refresh?

Example Ctrl:

$scope.signOut = function() {
CurrentUser.delete_all();
$state.go(‘welcome’);
$window.location = ‘/’;
}

CurrentUser Service

app.service(‘CurrentUser’, function(localStorageService) {

this.store = function(token, email, first_name){
localStorageService.add(‘token’, token);
localStorageService.add(‘email’, email);
localStorageService.add(‘first_name’, first_name);
}

this.delete_all = function() {
localStorageService.clearAll();
}
});

2

Have you seen this codepen?

3

Hey,

i implemented such a system in this way:

Login:
-> write data in localstorage
-> redirect to root state ‘/’ there my rootCtrl reads the localstorage one time and saved the data.
Logout:
-> delete localstorage and clear saved data

Login again:
-> write new data in localstorage
-> rootCtrl checks - if the auth data is already set -> if not: read localstorage
-> and here are your new data

4

That’s basically my workflow as well. On further inspection, I think my issue maybe related to how I’m setting the authorization headers in my CurrentUser Service and angular models.

this.authorization_header = function() {
if(this.isAuthenticated()) {
return { ‘Authorization’: ‘Token token="’ + this.token() + ‘“, email=”’ + this.email() + ‘"’ };
} else {
return { ‘Authorization’: ‘Token token=“null”’ };
}
};

this.isAuthenticated = function(){
return ( this.token() != null && this.email() != null && this.token().length != 0 && this.email().length != 0)
}

model

app.factory(‘Bike’, function ($resource, CurrentUser, Host) {
return $resource(Host + ‘/user/bikes/:id’,
{ id: ‘@id’ },
{
‘get’: { method:‘GET’, headers: CurrentUser.authorization_header() },
‘save’: { method:‘POST’, headers: CurrentUser.authorization_header() },
‘query’: { method:‘GET’, isArray:true, headers: CurrentUser.authorization_header() },
‘remove’: { method:‘DELETE’, headers: CurrentUser.authorization_header() },
‘delete’: { method:‘DELETE’, headers: CurrentUser.authorization_header() },
‘update’: { method:‘PATCH’, headers: CurrentUser.authorization_header() }
});
});

Until I do a hard refresh, the old value will be passed for api calls. Logging CurrentUser.authorization_header() on sign in shows the new correct value, but the api calls are somehow passing the old value. On closer look how I’ve had to do a hard refresh is probably a bandaid to the real problem and not related to ionic but any suggestions would be helpful.

5

After investigating it looks like calling location.reload() will work in the emulator and in the browser. I’m still curious why a refresh is required.

$scope.signOut = function() {
CurrentUser.delete_all();
location.reload()
}

6

But it should not be necessary to reload your location after logout.

maybe your authorization_header() functions are wrong.
Maybe this.token()… is set, after logout :wink:

Greets

7

If we signout the username and password is not cleared. its still available

8

have to clear the scope variables/models of the inputs

9

in my form i done so many changes those will still reflecting even i logout and login again. how to make all this as default view. even if i chagned the toogle buttons and scroll the view etc.