In this article I will explain with an example, how to disable Back Button in Browser after Logout using AngularJS in ASP.Net MVC.
Note: For more details on ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
Disabling Browser Back button will prevent user from navigate to previous page after Logout using Back Button of the browser or the back option in the context menu.
One cannot disable the Browser Back Button functionality only thing that can be done is prevent them going back.
 
 

Controller

The Controller consists of following Action methods.

Action method for handling Home GET operation

This Action method gets called when Home View is refreshed.
 

Action method for handling Logout GET operation

This Action method gets called when the Anchor Link of Home View is clicked or Logout View is refreshed.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Home()
    {
        return View();
    }
 
    // GET: Logout
    public ActionResult Logout()
    {
        return View();
    }
}
 
 

Disabling Browser Back Button after Logout using jQuery

For illustration purposes, two Pages are used Home and Logout. After logging out User is sent to Logout page and using Browser Back Button he will be prevented from going back to Home page from Logout page.

Home Page

The HTML Markup of Login page consists of:
div – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML Markup of Home page also consists of an HTML Anchor tag.
The href property of the Anchor tag is set to path of Logout page.
 

Disabling Browser Back Button Script

Inside the HTML Markup, first the following script file is inherited.
1. angular.min.js
Inside the AngularJS Controller, the timeout function is called which schedules the execution time with delay of 0 (zero) milliseconds.
Inside the timeout function, the $window.history.forward() method is called which navigates the browser forward one step in their history. Whenever Browser Back Button is clicked, this function immediately moves it one step forward.
Note: For more details on how to use $timeout service, please refer my article Using $timeout service in AngularJS.
 
Finally, the unload event handler is attached to the window using addEventListener method which returns NULL to disable (prevent) the Browser Back Button.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Home</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", []);
        app.controller("MyController", function ($scope, $window, $timeout) {
            $timeout(function () {
                $window.history.forward();
            }, 0);
 
            $window.addEventListener('unload', function () {
                null;
            });
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <h3>Home</h3>
        <hr />
        <a href="/Home/Logout">Logout</a>
    </div>
</body>
</html>
 

Logout Page

The HTML Markup of Logout page consists of an H3 tag for displaying message.
@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <title>Logout</title>
</head>
<body>
    <h3>Logout</h3>
</body>
</html>
 
 

Screenshot

Disable Browser Back Button after Logout in ASP.Net using AngularJS
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions