At the root level of my web site, I want to show one view to an authenticated use and a different view to an anonymous user. This is a very common need and feature in many web applications. For example, let’s look at Facebook. When you point your browser to http://facebook.com, you will get one of two things depending on whether you have an authenticated session. If there is no active session, then you are presented with a welcome message which asks you to create an account. If there is an active session, then your get your timeline.
The solution for this from the server-side is actually simple. When the server receives the request for the home page, then we can simply check the session and use it to decide which view to respond with. Done. Easy as pie!
With a SPA, the solution wasn’t as clear. At least not to me with my limited AngularJS experience.
To be honest, I hope somebody else has a better solution than this to share with me. But this is what I did. I started an
app.js file containing some simple AngularJS configuration logic:
The template pulled down by the root route was empty at this point and I was forced to make a choice. Should this template contain the welcome page content? Or should it contain the authenticated user content? Or what?
I decided it would contain the authenticated user content. This is because I expect (well more like hope) that most people who visit my application will log in and use it. This hopeful assumption made sense and so I set out to build my home page controller.
The first thing that I thought I would do was to inject the
$http service so I could make a call to my website’s API and get the user’s session object. If I get a session back then I can go ahead with displaying the home page for the authenticated user. If I don’t then I can route them to the welcome page using the injected
$location service and ask them to sign up or log in.
At this point my update
app.js file looks like this:
This approach is very simple. At the end of the day, it is not really what I wanted. What I wanted to do is to dynamically tell the
tempalteUrl to use dynamically. This is probably due to my experience writing server-side MVC logic to select a view based on the session state. I didn’t like that I now have an extra route for my welcome page. This doesn’t feel right to me. At least, it doesn’t feel natural.
Another approach that I considered after this implementation is using an
ngView directive in my template and dynamically setting the
templateUrl value using the
$scope in the controller. However, I don’t like the idea of branching logic in the controller to populate the scope differently based on the session. That doesn’t feel right either.
So what’s next? Well, I think I am going to stick with this solution for a bit and probably create a session service to get the session object since I will probably need it between various controllers. I will probably also push a response interceptor in the
$httpProvider to handle unauthorized responses from the API. While I am not entirely comfortable with this approach yet. It looks promising giving my limited exposure to AngularJS. I am hopeful that a fellow reader may offer some suggestions and/or advice.