how to disable the back button after logout in angular 7

Question

I have one login page as part of my application . I want to disable my back button after logout successfully so that the user can not go back.

Answer 1

You can add a guard to watch and decide if user can access the page or not rather than disabling the browser's events. CanActivate is the saviour

CanActivate (Interface)

Interface that a class can implement to be a guard deciding if a route can be activated. If all guards return true, navigation will continue. If any guard returns false, navigation will be cancelled. From official documentation of Angular

Here I am adding some code that I am currently using. Hope it helps to understand how to implement one.

import { CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';

import { IdentityService } from './identity.service';

@Injectable()
export class LoginGuard implements CanActivate {

    constructor(private identityService: IdentityService, private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        if (this.identityService.isLoggedIn()) { // determine if the uder is logged in from this method.
            return true;
        }
        this.router.navigate(['/login']);
        return false;
    }
}

add this LoginGuard class into provider in you app.module.ts

providers: [{ provide: LoginGuard, useClass: LoginGuard }]

then add canActive in the route to guard it.

{
    path: 'dashboard',
    component: DashboadComponent,
    canActivate: [LoginGuard]
}