Logout of angular 2

Question

Folks, I need your help in the angular 2 script below. I have an exit link that should call a method in AuthService.

<li><a [routerLink]="['/logout']"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a></li> 

in AuthService:

 //logout logout() { this.isUserLoggedin = false; } 

How to achieve this? I do not want to create another component just to call logout. Appreciate your help.

Answer 1

I was interested in the same thing, but in the end I created a LogoutComponent with an empty template and redirected the user to log in after that. Button based logout functionality works, but I need a link to logout.

LogoutComponent.ts

 @Component({ template: '' }) export class LogoutComponent implements OnInit { constructor(private _authService: AuthService, private router: Router) {} ngOnInit() { this._authService.logout(); this.router.navigate(['login']); } } 

app.routes.ts

  { path: 'logout', component: LogoutComponent} 

Answer 2

(Solution for angular 2, for angular 4, use ng-If / Else)

Assuming links appear on the app.component home page, follow these steps in app.component.ts. This successfully displays the "Logout" link when a user logs in, otherwise the "Logon" link is displayed ( due to binding to the observed, not the static field )

 public isUserLoggedIn: boolean = false; ngOnInit(): void { // Setup a subscription so our variable will know the latest status of login this._authService.isLoggedIn().subscribe(status => this.isUserLoggedIn = status); } 

In html use this

 <div> <table *ngIf="isUserLoggedIn"> <tr> <td> <a href="#" (click)="logoutClicked($event)" id="logout"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a><br /></td> </tr> </table> <table *ngIf="! isUserLoggedIn"> <tr> <td> <a [routerLink]="['/login']" id="login"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>Login</a><br /></td> </tr> </table> </div> 

The logoutClicked event will simply call the authService logout method

To avoid using the same method at the same time, ngSwitch is the best choice, but somehow unable to make it work, although it will look like this: -

 <div [ngSwitch]="IsUserLoggedIn()"> <a href="#" (click)="logoutClicked($event)" id="logout" *ngSwitchCase="true"> <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Logout</a><br /> <a [routerLink]="['/login']" id="login" *ngSwitchCase="false"> <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>Login</a> </div> 

Answer 3

If you do not need a component, you do not need to use it. Just bind the click event to a function that logs the user out and redirects to where you want. Remember to pass the $ event object to prevent the default behavior:

 <li><a href="#" (click)="onClick($event)">(your link content)</a></li> 

And in the component that displays this menu:

 onClick(event: Event): void { event.preventDefault(); // Prevents browser following the link // Here you can call your service method to logout the user // and then redirect with Router object, for example } 

Answer 4

Assuming your route is defined in some kind of XComponent, inside ngOnInit you can get the last part of the URL, for example:

 this.route.url.subscribe(data => { this.authType = data[data.length - 1].path; }); 

Now check if this route has completed and call authService if this:

 if (this.authType === 'logout') { this.authServie.logout(); } 

Everything that is included in the ngOnInit component that has a logout path. That way, you won’t need to define an optional Exit component!