Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The TempHire sample in Breeze has a really good way of handling authentication for a SPA (in my opinion at least!) Granted this is using Durandal so you will need to adapt it to Angular, but they are both frameworks doing the same basic principles so good luck! -</p> <p>Basically, the Controller action has an annotation [Authorize] on the action that the prepare method is calling on the entitymanagerprovider. If a 401 is returned (not authorized) the SPA takes the bootPublic path and only exposes a login route to the user. When the login is successful, the login method tells the window to reload everything, at which time the authorization passes, and the bootPrivate method is called - </p> <p>shell.js (Durandal, but should be adaptable)</p> <pre><code> //#region Internal Methods function activate() { return entitymanagerprovider .prepare() .then(bootPrivate) .fail(function (e) { if (e.status === 401) { return bootPublic(); } else { shell.handleError(e); return false; } }); } function bootPrivate() { router.mapNav('home'); router.mapNav('resourcemgt', 'viewmodels/resourcemgt', 'Resource Management'); //router.mapRoute('resourcemgt/:id', 'viewmodels/resourcemgt', 'Resource Management', false); log('TempHire Loaded!', null, true); return router.activate('home'); } function bootPublic() { router.mapNav('login'); return router.activate('login'); } </code></pre> <p>login.js -</p> <pre><code> function loginUser() { if (!self.isValid()) return Q.resolve(false); return account.loginUser(self.username(), self.password()) .then(function() { window.location = '/'; return true; }) .fail(self.handleError); } </code></pre> <p>The account.loginUser function is basically just an ajax call that passes credentials to the account controller and returns a success or failure. On success you can see the callback is fired for window.location = '/' which does a full reload. On failure simply show an alert or something.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload