Hi Belén,
i think you can resolve whit a simple variable in your service.
Try some changes
// AuthenticationService:
// currenUser$: Subject<User> = new Subject<User>();
public currentUser:User;
// in the map on success
this.currentUser = user;
//in ngOnInit of AppComponent
if (this._autenticationService.currentUser){
this.loggedUser = this._autenticationService.currentUser;
}else{
// go to login form
}
I work to an application with the same JWT token, we use this strategy and
work fine.
Il giorno venerdì 28 settembre 2018 17:20:59 UTC+2, Belen Martin ha scritto:
>
> 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.
