SPA with two MVC controllers

Question

Following John Papa's course I am building a SPA and trying to make sure that the users get to the SPA only after Facebook/Google+ authentication. For this to work I have two MCV controllers the default and landing controller is called Home/Index and this only displays introductory screen with FB/G+ login buttons. Once uses click one of the button and authenticate the users are then taken to the second controller which is the actual SPA page and has the div with id=applicationHost and where the shell loads and SPA begins.

I am using the following routes JSON array to map my routes

var routes = [{
               url: 'snaps', 
               moduleId: 'viewmodels/snaps', 
               name: 'Snaps', 
               visible: true
              },{
               url: 'places', 
               moduleId: 'viewmodels/places', 
               name: 'Places', 
               visible: true
             }];

But when I call router.map(config.routes) followed by router.activate('snaps')

the router is looking for the snaps route in the root of the whole application

the url its trying to load is like 'localhost:XXXX/Home/#'

As a result I get a 404 error from Sammy.

When I manually load go to 'localhost:XXXX/SPA/Snaps/# I get my view without issues.

How can I make the router looks for the routes 'snap' and 'place' in the SPA MVC controller rather than the 'Home' controller.

All this I am doing just to make sure that I get people authenticated before letting them to SPA so if there is however a way to do the authentication in one of the SPA view itself then I have essentially avoided this problem. If there is no answer to my question above at least if someone can shed some light on how I can do user authentication in SPA view that will be great too.

Thanks in advance

Answer 1

One workaround is to set your SPA Controller as the default controller. Something along these lines:

System.Web.Routing.RouteTable.Routes.MapRoute(
          name: "SPA",
          url: "{controller}/{action}/{id}",
          defaults: new
          {
              controller = "SPA",
              action = "Index",
              id = UrlParameter.Optional
          }
      );

Make sure it is the first MVC route that gets mapped.

Then... In your web.config, you can set the loginUrl to the Landing Controller.

<authentication mode="Forms">
  <forms loginUrl="~/Home/Index" timeout="2880" />
</authentication>

Then.. Decorate your SPA Controller with the Authorize attribute. All unauthenticated requests to the SPA Controller will be redirected to the loginUrl, which points to your Landing Controller