CODEWITHSUNDEEP
angular
leo
leo

Reputation: 3055

Logout link in angular 2

Folks, Need your help in below angular 2 application scenario. I have logout link which needs to invoke method in AuthService. 

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

method in AuthService:

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

How to achieve this? I dont want to create yet a new component just for calling logout. Appreciate your help.

Upvotes: 13

Views: 41259

Answers (4)

Zishan Ahmad
Zishan Ahmad

Reputation: 13

Assuming your route is defined in some XComponent, inside the ngOnInit you can get the last part of the url like so

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

Now check if this route is logout and call the authService if it is:

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

All that goes into the ngOnInit of the component that has the logout route defined. This way, you won't need to define an extra Logout component!

Upvotes: 0

NitinSingh
NitinSingh

Reputation: 2068

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

Assuming the links are displayed in main page app.component, have following in the app.component.ts. This successfully displays the Logout link when user is logged in, else displays the Login link (due to being tied with an Observable rather than 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 just call the authService's logout method

In order to avoid hitting same method twice, ngSwitch is a better choice, but somehow not able to get it working, although will look as below:-

<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>

Upvotes: 0

mariogl
mariogl

Reputation: 1295

If you don't need a component, you don't have to use one. Just bind click event to a function that logouts the user and redirects to where you want. Remember passing the $event object in order to prevent default behaviour:

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

And in the component that renders that 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
}

Upvotes: 1

mansoor.khan
mansoor.khan

Reputation: 2616

I was wondering the same thing but I ended up creating a LogoutComponent with a blank template and redirecting the user to login after that. The button based logout functionality works but I wanted a logout route link.

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}

Upvotes: 31

Related Questions