J'ai la propriété booléenne isAdmin que je vérifie l'utilisateur connecté en tant qu'utilisateur ou administrateur. Le backend est .net core 2.2, db - Postgre. Tout fonctionne bien mais après l'actualisation, je perds la valeur isAdmin. J'ai un menu déroulant d'affichage conditionnel qui n'est disponible que pour les rôles d'administrateur. Comment ne pas perdre de données après l'actualisation? P.S. Comment ajouter une logique également à ma garde pour la propriété isAdmin? Mon composant ressemble à:
canActivate(): boolean {
if(this.authService.loggedIn()) {
return true
}
this.alertify.error('You have no access to see this page!!!');
this.router.navigate(['/home']);
return false;
}
Mon html ressemble à:
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
<div class="container">
<a class="navbar-brand" [routerLink]="['/home']">
<img [src]="iteraLogo" alt="Itera">
</a>
<div *ngIf="loggedIn()" class="dropdown" dropdown [hidden]="!model.isAdmin">
<a class="dropdown-toggle" dropdownToggle>
<strong class="text-primary">Admin Panel</strong>
</a>
<div class="dropdown-menu mt-4" *dropdownMenu>
<ul class="navbar-nav">
<li class="nav-item" routerLinkActive="router-link-active">
<a class="nav-link" [routerLink]="['/projects']">Projects</a>
</li>
<li class="nav-item" routerLinkActive="router-link-active">
<a class="nav-link" [routerLink]="['/hypervisors']">Hypervisors</a>
</li>
<li class="nav-item" routerLinkActive="router-link-active">
<a class="nav-link" [routerLink]="['/management']">Management</a>
</li>
<li class="nav-item" routerLinkActive="router-link-active">
<a class="nav-link" [routerLink]="['/users']">Users</a>
</li>
<li class="nav-item" routerLinkActive="router-link-active">
<a class="nav-link" [routerLink]="['/user-projects']">Users Projects</a>
</li>
</ul>
</div>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item" routerLinkActive="router-link-active">
<a class="nav-link" [routerLink]="['/test']">About</a>
</li>
</ul>
<div *ngIf="loggedIn()" class="dropdown" dropdown>
<a class="dropdown-toggle" dropdownToggle>
Welcome <strong>{{ authService.decodedToken?.unique_name | titlecase }}</strong>
</a>
<div class="dropdown-menu mt-3" *dropdownMenu>
<a class="dropdown-item text-primary" [routerLink]="['/projects/',
authService.decodedToken?.nameid ]"><i class="fa fa-archive"> My Projects</i></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" (click)="logout()"><i class="fa fa-sign-
out"> Logout</i></a>
</div>
</div>
<form *ngIf="!loggedIn()" #loginForm="ngForm" class="form-inline my-2 my-lg-0">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-user-circle-o text-primary" aria-hidden="true"></i>
</div>
</div>
<input class="form-control" placeholder="Username" name="username" required
[(ngModel)]="model.username" />
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-unlock text-danger" aria-hidden="true"></i>
</div>
</div>
<input class="form-control" placeholder="Password" name="password" required type="password"
[(ngModel)]="model.password" />
</div>
<div>
<button [disabled]="!loginForm.valid" type="submit" (click)="loginAsUser()" class="btn btn-primary my-2 my-sm-0">
<i class="fa fa-user-circle" aria-hidden="true"></i> User
</button>
<button [disabled]="!loginForm.valid" type="submit" (click)="login()" class="btn btn-success
my-2 my-sm-0">
<i class="fa fa-user-secret" aria-hidden="true"></i> Admin
</button>
</div>
</form>
</div>
</nav>
Ma garde ressemble à:
model: any = {};
constructor(public authService: AuthService, private alertify: AlertifyService, private router:
Router) { }
ngOnInit() {
}
login() {
this.authService.login(this.model).subscribe(next => {
this.model.isAdmin = true;
this.alertify.success('Logged in as Admin')
}, error => {
this.alertify.error(error)
}, () => {
this.router.navigate(['/projects'])
})
}
loginAsUser() {
this.authService.loginAsUser(this.model).subscribe(next => {
this.model.isAdmin = false;
this.alertify.success('Logged in as User')
}, error => {
this.alertify.error(error)
}, () => {
this.router.navigate(['/home'])
})
}
loggedIn() {
return this.authService.loggedIn();
}
logout() {
localStorage.removeItem('token');
this.alertify.message('logged out');
this.router.navigate(['/home'])
}
4 Réponses :
Vous devez effectuer l'appel d'API du service d'authentification avec ngoninit des composants et obtenir l'indicateur isAdmin. De cette façon, lorsque vous actualisez à chaque fois, ngOnInit sera impliqué et vous obtiendrez cet indicateur.
ngOnInit(){ this.authService.login(this.model).subscribe(next => {
this.model.isAdmin = true;
});
}
quand je mets mon code dans ngOnInit, je reçois une exception de l'intercepteur --- La référence d'objet n'est pas définie sur une instance d'un objet.
Ok .. J'ai votre problème maintenant. Vous avez deux connexions utilisateur séparément et vous stockez déjà le jeton dans localstorage, ce qui facilite les choses. Vous pouvez définir cet indicateur d'administrateur dans votre service lui-même dans le jeton et décoder le jeton pour obtenir la valeur.
Vous devrez stocker votre Auth_Token dans localhost / indexDB / SessionStorage , puis à l'intérieur de votre route Guard, vérifiez si ce jeton est valide ou non.
De cette façon, votre application ne nécessitera pas d'authentification tant que votre jeton ne sera pas valide .
Utilisez ce module npm pour y parvenir: entrez la description du lien ici
J'ai configuré tous les jwt à la fois pour le backend et pour le frontend et cela fonctionne bien. Je stocke mon jwt dans localStorage. Mais je ne perds pas le jeton jwt mais la valeur booléenne isAdmin. Ma question est de savoir comment ne pas perdre isAdmin après rafraîchissement. Donc ce n'est pas un problème avec jwt car cela fonctionne même après rafraîchissement
Vous devrez ajouter cette connexion dans la méthode AuthGuard CanActivate. Vérifiez si le jeton présent dans le stockage est valide, puis retournez true sinon retournez false et accédez à l'écran de connexion
Définissez une variable dans localStorage après une connexion réussie, comme
if(!localStorage.getItem('loggedUser')){
this._router.navigate(['login']);
return false;
}
return true;
La prochaine fois que vous entrerez dans un composant, vérifiez
isloggedIn(authUser) {
return this.httpClient.post<any>(`${this.apiUrl}/api/users/login`, {user: authUser})
.do(res => this.setSession(res.user))
.shareReplay();
}
private setSession = (authResult) => {
localStorage.setItem('TOKEN', authResult.token);
localStorage.setItem('loggedUser', 'y');
this._router.navigate(['dashboard'])
};
cela authentifiez l'utilisateur sans appeler à nouveau l'API. récupérez simplement la clé de LocalStorage.
Lorsque vous actualisez la page, elle ne conserve pas les valeurs des variables, vous devez stocker soit dans le stockage local, soit dans un cookie.
Un moyen simple de résoudre ce problème est d'utiliser cette lib:
https://www.npmjs.com/package/ng2-cookies
Pour installer cette bibliothèque, exécutez:
import { Cookie } from 'ng2-cookies/ng2-cookies';
ngOnInit() {
this.model.isAdmin = Cookie.get('isAdmin');
}
login() {
this.authService.login(this.model).subscribe(next => {
Cookie.set('isAdmin', 'true');
this.alertify.success('Logged in as Admin')
}, error => {
this.alertify.error(error)
}, () => {
this.router.navigate(['/projects'])
})
}
Component
npm install ng2-cookies
vous pouvez également utiliser ngx-cookie-service
Vous devrez peut-être l'enregistrer dans LocalStorage, sinon les données seront toujours perdues. Pas Angular, toutes les autres bibliothèques stockent les données dans des variables pour toujours. Vous avez besoin d'un cookie ou de LocalStorage pour enregistrer les données