Hello, I had used (JWT) authentification with tokens for login in angular
6. The authentication works fine but I lost nameuser in toolbar when I
refresh with f5. Anyone knows what it's happend?
*here is the: auth.guard.ts*
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot }
from '@angular/router';
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (localStorage.getItem('currentUser')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}
*This is the service: authentication.service.ts*
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { User } from '../model/user';
@Injectable()
export class AuthenticationService {
constructor(private http: HttpClient) { }
currentUser$: Subject<User> = new Subject<User>();
login(username: string, password: string) {
return this.http.post<any>(`/users/authenticate`, { username: username,
password: password })
.pipe(map(user => {
// login successful if there's a jwt token in the response
if (user && user.token) {
// store user details and jwt token in local storage to keep user logged in
between page refreshes
localStorage.setItem('currentUser', JSON.stringify(user));
console.log(user.username + ' usuario logado');
}
this.currentUser$.next(user);
return user;
}));
}
logout() {
// remove user from local storage to log user out
localStorage.removeItem('currentUser');
this.currentUser$.next(undefined);
}
}
*Where I have the menu:*
*app.component.html*
<div class="alternative">
<mat-toolbar color="accent">
<mat-toolbar-row>
<a routerLink="home" href="home" >
<span> <img src="assets/bmartinlogo.png"/> </span>
</a>
<mat-menu #menu="matMenu">
<button mat-menu-item [matMenuTriggerFor]="Contactos">Visitantes</button>
<button mat-menu-item [matMenuTriggerFor]="Visitas">Visitas</button>
</mat-menu>
<mat-menu #Contactos="matMenu">
<button mat-menu-item><a routerLink="contaclist" href="contaclist">Listado
de visitantes</a></button>
</mat-menu>
<mat-menu #Visitas="matMenu">
<button mat-menu-item><a routerLink="visitlist" href="visitlist">Listado de
visitas</a></button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="menu"><mat-icon class="example-icon"
>menu </mat-icon>Menu</button>
<span class="example-fill-remaining-space"></span>
<p *ngIf="loggedInUser"> User:{{ loggedInUser.username }}</p>
</mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>
</div>
*app.component.ts*
import { AuthenticationService } from './services/authentication.service';
import { Component, ViewChild, OnInit } from '@angular/core';
import { MatTableDataSource, MatSnackBar } from '@angular/material';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'
;
import { ContactService } from './services/contact.service';
import { User } from './model/user';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'Visits Application';
loggedInUser: User;
constructor(public snackBar: MatSnackBar,
private _contactService: ContactService,
private dialog: MatDialog,
private _autenticationService: AuthenticationService,
) { }
ngOnInit() {
this._autenticationService.currentUser$.subscribe((user: User) => {
this.loggedInUser = user;
});
}
}
You can see the complete web : www.belenmartinsanchez.tk
THX¡¡¡¡¡¡
Belén Martín
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
