How to handle user sign out / local storage modifications

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();
}
});

Have you seen this codepen?

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

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.

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()
}

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

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

have to clear the scope variables/models of the inputs

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.