title: AngularJS- Login and Authentication in each route and controller
body: <p>I have an AngularJS application created by using yeoman, grunt and bower.</p>
  
  <p>I have a login page that has a controller that checks for authentication. If the credentials are correct I reroute to home page.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>'use strict';
  //Define Routing for app
  angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
    function($routeProvider,$locationProvider) {
      $routeProvider
      .when('/login', {
          templateUrl: 'login.html',
          controller: 'LoginController'
      })
      .when('/register', {
          templateUrl: 'register.html',
          controller: 'RegisterController'
        })
      .when('/forgotPassword', {
          templateUrl: 'forgotpassword.html',
          controller: 'forgotController'
        })
     .when('/home', {
         templateUrl: 'views/home.html',
         controller: 'homeController'
      })
      .otherwise({
         redirectTo: '/login'
      });
  //    $locationProvider.html5Mode(true); //Remove the '#' from URL.
  }]);
  
  angular.module('myApp').factory("page", function($rootScope){
      var page={};
      var user={};
      page.setPage=function(title,bodyClass){
          $rootScope.pageTitle = title;
          $rootScope.bodylayout=bodyClass;
      };
      page.setUser=function(user){
          $rootScope.user=user;
      }
      return page;
  });
  </code></pre>
  
  <p><strong>LoginControler.js</strong></p>
  
  <pre><code>'use strict';
  
  angular.module('myApp').controller('LoginController', function($scope, $location, $window,page) {
      page.setPage("Login","login-layout");
      $scope.user = {};
      $scope.loginUser=function()
      {
          var username=$scope.user.name;
          var password=$scope.user.password;
          if(username=="admin" &amp;&amp; password=="admin123")
          {
              page.setUser($scope.user);
              $location.path( "/home" );
          }
          else
          {
              $scope.message="Error";
              $scope.messagecolor="alert alert-danger";
          }
      }
  });
  </code></pre>
  
  <p>On the home page I have</p>
  
  <pre><code>&lt;span class="user-info"&gt;
      &lt;small&gt;Welcome,&lt;/small&gt;
      {{user.name}}
  &lt;/span&gt;
  &lt;span class="logout"&gt;&lt;a href="" ng-click="logoutUser()"&gt;Logout&lt;/a&gt;&lt;/span&gt;
  </code></pre>
  
  <p>In the <code>loginController</code>, I check the login info and if it's successful, I set the user object in the service factory. I don't know whether this is correct or not.</p>
  
  <p>What I need is, When the user is logged in, It sets some value in the user object so that all other pages can get that value.</p>
  
  <p>Whenever any route changes happen, the controller should check if the user is logged in or not. If not, it should reroute to the login page. Also, if the user is already logged in and come back to the page, it should go to home page. The controller should also check the credentials on all of the routes.</p>
  
  <p>I have heard about ng-cookies, but I don't know how to use them.</p>
  
  <p>Many of the examples I saw were not very clear and they use some kind of access roles or something. I don't want that. I only want a login filter.
  Can someone give me some ideas?</p>