22-3 Vérifier une propriété du LocalStorage

Dans le guard, il est possible de vérifier une propriété du LocalStorage, par exemple si on avait une propriété "pseudonyme" contenant le nom choisi de l'utilsateur.

src/app/guards/auth.guard.ts

export const authGuard: CanActivateFn = (route, state) => {
  const pseudo = localStorage.getItem('pseudo');
  if(pseudo){
    return true;
  }
  
  return false;
};

info

getItem sur localStorage permets d'accéder à une clé du local storage.

Vous devriez toujours être restreint d'accéder à la page d'accueil.

Modifier manuellement le local storage

Vous pouvez accéder au local storage du navigateur via les outils de développeurs.

Dans Firefox

1. Onglet Stockage
2. Stockage local
3. http://localhost:4200

Dans Chrome

1. Onglet Application
2. Onglet Local storage
3. http://localhost:4200

Vous pouvez ensuite éditer manuellement les propriétés contenues dans le stockage local.

Ajouter une clé pseudo

Ajoutez manuellement une clé pseudo.

http://localhost:4200

Test

Cela devrait vous avoir redonné accès à l'accueil! Comme une propriété pseudo a été ajoutée au stockage local et que le guard effectue une vérification sur cette propriété, vous avez maintenant accès à l'application!