Effacer localStorage à chaque rafraîchissement dans angulaire 2

Question

Je stocke un jeton dans localStorage après l'authentification, mais je dois le supprimer et rediriger vers un routeur chaque fois que je fais un rafraîchissement.

Je n'ai aucune ideea comment le faire en angulaire. J'utilise une manière très hacky utilisant des js simples. Je pensais à ajouter un gardien d'authentification, mais je suis sûr qu'il devrait y avoir une façon plus angulaire de le faire.

Answer 1

Je suggère de créer un service d'authentification pour stocker votre jeton en tant que variable simple et un Guard pour empêcher les redirections vers des pages sécurisées sans jeton. Vous pouvez l'implémenter dans un service:

@Injectable() 
export class AuthService implements CanActivate, CanActivateChild { 
    token:String; 
    canActivateChild = this.canActivate; 
    constructor(private router: Router) {} 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     if (!this.token) { 
      this.router.navigate(['/signin']); 
      return false; 
     } 
     return true; 
    } 
} 

export const ROUTES: Routes = [{ 
    path: 'signup', 
    component: SignupComponent 
}, { 
    path: 'securedpath', 
    component: SecuredComponent, 
    canActivateChild: [AuthService], 
    canActivate: [AuthService] 
}] 

Mais ce service doit être singleton. Garde le en mémoire. Déclarez-le dans la liste des fournisseurs de votre app.module (ou core.module si vous utilisez le guide de style de Jonh Papa)