Login page in AngularJS

Question

I've got a web application where all interactions require logging in. I see at least two ways of implementing a login page view in AngularJS.

One is to use a separate view: let say I'm using angular-ui-router and define a top-level view with two states: login and dashboard.

myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/login");
  $stateProvider
    .state('login', {
      url: "/login",
      templateUrl: "partials/login.html"
    })
    .state('mainpage', {
      url: "/mainpage",
      templateUrl: "partials/mainpage.html",
      controller: function($scope) {
        …
      }
    });

Second is to just make use of ng-if:

<span ng-if="loggedin">
  … my main page …
</span>
<span ng-if="!loggedin">
  … login page …
</span>

I see that the second option will easily allow users to link to specific sections of their pages, with the login page showing up as necessary automatically, whereas the first option will require me to code some redirection stuff to make this happen.

However, for some reason I feel the first option is cleaner, even if I cannot provide any reasonable arguments now.

I'm starting with AngularJS now, so I don't have enough experience to decide on any of these options. Which one is more desirable?

Answer 1

I answered a similar question here: AngularJS Authentication + RESTful API

---

I've written an AngularJS module for UserApp that supports protected/public routes, rerouting on login/logout, heartbeats for status checks, stores the session token in a cookie, directives for signup/login/logout, etc.

https://github.com/userapp-io/userapp-angular

You could either:

1. Modify the module and attach it to your own API, or
2. Use the module together with UserApp (a cloud-based user management API)

If you use UserApp, you won't have to write any server-side code for the user stuff (more than validating a token). Take the course on Codecademy to try it out.

Here's some examples of how it works:

• How to specify which routes that should be public, and which route that is the login form:

  $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
  $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
  $routeProvider.when('/home', {templateUrl: 'partials/home.html'});
  

  The .otherwise() route should be set to where you want your users to be redirected after login. Example:

  $routeProvider.otherwise({redirectTo: '/home'});

• Login form with error handling:

  <form ua-login ua-error="error-msg">
      <input name="login" placeholder="Username"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Log in</button>
      <p id="error-msg"></p>
  </form>
  

• Signup form with error handling:

  <form ua-signup ua-error="error-msg">
    <input name="first_name" placeholder="Your name"><br>
    <input name="login" ua-is-email placeholder="Email"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Create account</button>
    <p id="error-msg"></p>
  </form>
  

• Log out link:

  <a href="#" ua-logout>Log Out</a>

  (Ends the session and redirects to the login route)

• Access user properties:

  User properties are accessed using the user service, e.g: user.current.email

  Or in the template: <span>{{ user.email }}</span>

• Hide elements that should only be visible when logged in:

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

• Show an element based on permissions:

  <div ua-has-permission="admin">You are an admin</div>

And to authenticate to your back-end services, just use user.token() to get the session token and send it with the AJAX request. At the back-end, use the UserApp API (if you use UserApp) to check if the token is valid or not.

If you need any help, just let me know :)