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

"Taken to the second controller" - you mean a full page refresh right?IMHO (since I had implemented it) the "login" should be a part of the SPA application itself, such that it is one of the views. Some points: 1.)Build the Web API's for the login procedure, callable via ajax. 2.) Decorate your controller classes with Authorize. This way, no unauthorized calls will succeed. — alpinescrambler
– alpinescrambler, Commented Jun 11, 2013 at 20:13
@alpinescrambler thanks for your response, yes I am doing a full page refresh but thats only the first time (during login). I did it that way because I could not figure out how to do the Facebook auth in SPA view. Could you please elaborate more on point no. 1 in you comment? Can you please shed more light on how I can do external OAuth with a webAPI. Thanks once again. — indichimp
– indichimp, Commented Jun 11, 2013 at 20:22

Jacques Snyman · Accepted Answer · 2013-06-12 12:28:14Z

2

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

answered Jun 12, 2013 at 12:28

Jacques Snyman

4,3702 gold badges32 silver badges51 bronze badges

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

1 Comment

indichimp Over a year ago

Thank you, that really helped, appreciate it.

Collectives™ on Stack Overflow

SPA with two MVC controllers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related