I'm having trouble with the login and register links in the navbar. I want them to disappear when a user is logged in. Even after following a Youtube tutorial to resolve this issue, it's still not working.
<li *ngIf="authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]= "['/dashboard']">Dashboard</a> </li>
<li *ngIf="authService.loggedIn()" [routerLinkActive]="['active'] " [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]= "['/profile']">Profile</a></li>
<li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"><a [routerLink]= "['/login']">Login</a></li>
<li *ngIf="!authService.loggedIn()" [routerLinkActive]="['active']" [routerLinkActiveOptions] = "{exact:true}"> <a [routerLink]= "['/register']">Register</a></li>
<li *ngIf="authService.loggedIn()"><a (click)="onLogOutClick()" href="#">Logout</a></li>
Currently, both logout and profile are hidden at all times and do not appear when I am logged in.
This is how the Auth.service.ts file is structured:
import { Http, Headers } from '@angular/http';
import { map } from 'rxjs/operators';
import { tokenNotExpired } from 'angular2-jwt';
@Injectable()
export class AuthService {
authToken: any;
user: any;
constructor(private http: Http) { }
registerUser(user){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:3000/users/register', user, {headers: headers})
.pipe(map(res => res.json()));
}
authenticateUser(user){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:3000/users/authenticate', user, {headers: headers})
.pipe(map(res => res.json()));
}
storeUserData(token, user){
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
}
loggedIn(){
return tokenNotExpired();
}
logout(){
this.authToken = null;
this.user = null;
localStorage.clear();
}
getProfile(){
let headers = new Headers();
this.loadToken();
headers.append('Authorization', this.authToken);
headers.append('Content-Type', 'application/json');
return this.http.get('http://localhost:3000/users/profile', {headers: headers})
.pipe(map(res => res.json()));
}
loadToken(){
const token = localStorage.getItem('id_token');
this.authToken = token;
}
}