Creating an authentication system within a Single Page App (SAP) can be a bit tricky; hopefully this post will help alleviate some of the challenges. Before you begin, it's a good idea to set up your environment so as to decouple the front and backends. There's a good post explaining the process over at StackOverflow. (The StackOverflow answer deals with a Laravel backend, but the code is easily modified for any other backend service.)
Our application will be structured as follows:
Let's start with our basic index.html setup:
Now we can create our basic App (in app.js), routing a few paths to appropriate controllers and partials:
Note that we declare [code]ngRoute[/code] as a dependency for our App, and use the [code]resolve[/code] object property to map dependencies that will be injected into the controller. Our [code]isAnon[/code] and [code]isAuth[/code] dependencies will be promises, and Angular's router will wait for them to be resolved or rejected before instantiating the controller. This means we can use them as a sort of "filter" to control access to our routes.
Now we will create the [code]isAuth[/code] and [code]isAnon[/code] promises:
Both of the promises perform a [code]GET[/code] request against [code]/ws/api/v1/auth[/code] and work with the returned JSON. Our example backend will return a JSON object which will contain a string [code]status[/code] property (set to either [code]ok[/code] or [code]error[/code]), a boolean [code]auth[/code] property (current authentication state), and a string [code]user_email[/code] property. Depending on the values in returned JSON, the promises will either resolve or reject.
Now that the promises are set up (and the backend is returning the appropriate JSON response) we can create the login form in partials/login.html:
This form creates two textfields, binds their values to a [code]form_data[/code] object, and calls the [code]process()[/code] function upon form submission.
Next up is the the [code]loginController[/code] we refenced in our route provider. Declare it in controllers/loginController.js, and don't forget to load the file in your [code]index.html[/code]:
You'll note that the controller uses a (so far undefined) service called authService. Let's create it in services/authService.js: