Disable back button in angular2

Question

When on the redirect url after the payment gateway , want to disable the back button in angular 2.I have tried to use window events beforeunload and onPopstate , None of them seem to work

I have also tried to use window.history.forward but does not work .Please suggest!

you cannot disable back button of browser. Instead you should show a message to user that they shouldn't press back button. — Dhyey
– Dhyey, Commented Jul 15, 2017 at 7:06
The message can also be added if the event gets caught , these events are not caught on my page which is a redirected page after payment. it works on other pages but only when I add some url in the history — Gurpreet
– Gurpreet, Commented Jul 15, 2017 at 7:11
This is what I have done for the first page and it works host: <code> { '(window:popstate )': 'onWindowScroll($event)' },history.pushState(null, null, window.location.pathname); onWindowScroll(event: Event): void { if (confirm("You have already checked out, do you still want to exit")) { history.go(-1); } else { history.pushState(null, null, window.location.pathname); } } </code> But this doesnot work for redirected page after the payment — Gurpreet
– Gurpreet, Commented Jul 15, 2017 at 7:13

Jayakrishnan · Accepted Answer · 2017-07-15 10:04:33Z

5

You can use AuthGuard in angular 2 to suffice your requirement. You just need to implement CanActivate and write your business logic

import { Injectable } from '@angular/core';
import { Router, CanActivate, CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router) { }

canActivate() {
   if (localStorage.getItem('payment')) { //key to indicate that user has visited payment gateway (you can change as per your needs)
        return false;
    }
    return true;
}


}

Routing

        {
            path: 'home',
            component: homeComponent,
            canActivate: [AuthGuard]
        }

Hope it helps!!

answered Jul 15, 2017 at 10:04

Jayakrishnan

4,3043 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable back button in angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related