2016-01-29

AngularJS routes with ASP MVC Forms authentication

The ASP MVC app I am working on uses forms authentication with a timeout. This means that when the session has timed out and the user clicks refresh they get redirected to a login page, and after that they get directed back to the original page without the deep-linked client-side # part of the url. 

The solution to this is as follows:

The first thing to do is to have the ASP MVC server side capture any URLs that should related to your client-side angular routing and return the single-page app HTML. When registering your ASP MVC routes add the following rule
        routes.MapRoute(
            name: "Angular",
            url: "x/{*clientPath}",
Where the "x/" is the base part of your client app, of course you can do without the "x" in the URL if your entire app is a single-page angular app, in which case you will need to add a preceding rule to render your ASP MVC server side account-login page.
Then in your Angular app make sure you use Html5 mode, like so
app.config(["$locationProvider", "$routeProvider", function ($locationProvider, $routeProvider) {

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false,
        rewriteLinks: true
    });

    $routeProvider.when("/x/docs/upload", {
        ......
    });
    $routeProvider.when("/x/docs/view", {
        ......
    });
    $routeProvider.otherwise({
        redirectTo: "/x/docs/upload"
    });
}]);
When you open your browser and navigate to http://mysite/x/what/ever/you/like the server side will use XController.Index to render Views\x\Index.cshtml, which will load your single page app, and then ngRoute will take over and present the relevant view for the "x/what/ever/you/like" part.