title: AngularJS - Checking if a user is authenticated and then routing them to the correct page
body: <p>What I am looking to do I when a user comes to the index.html page I need the login module to do 2 things:</p>
  
  <ol>
  <li><p>I need this to check if a user is authenticated ( which I think I already started with the "function authService" ) if the user has a valid token then change the ui-view to dashboard/dashboard.html and if the key is not valid or there is no key at all then load login/login.html into ui-view.</p></li>
  <li><p>Once they have successfully logged in I want them to be routed to "dashboard/dashboard.html"</p></li>
  </ol>
  
  <p>Here is my login script:</p>
  
  <pre><code>function authInterceptor(API) {
    return {
      request: function(config) {
        if(config.url.indexOf(API) === 0) {
          request.headers = request.headers || {};
          request.headers['X-PCC-API-TOKEN'] = localStorage.getItem('token');
        }
        return config;
      }
    } 
  }
  
  function authService(auth) {
    var self = this;
    self.isAuthed = function() {
      localStorage.getItem('token');
    }
  }
  
  function userService($http, API) {
  
    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;';
    $http.defaults.transformRequest = [function(data) {
        return angular.isObject(data) &amp;&amp; String(data) !== '[object File]' ? param(data) : data;
      }];
  
    var self = this;
  
    self.login = function(username, pwd, ctrl) {
      ctrl.requestdata = API + '/winauth' + '; with ' + username;
      return $http.post(API + '/winauth', {
          username: username,
          pwd: pwd
        })
    };
  
    var param = function(obj) {
      var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
  
      for(name in obj) {
        value = obj[name];
  
        if(value instanceof Array) {
          for(i=0; i&lt;value.length; ++i) {
            subValue = value[i];
            fullSubName = name + '[' + i + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&amp;';
          }
        }
        else if(value instanceof Object) {
          for(subName in value) {
            subValue = value[subName];
            fullSubName = name + '[' + subName + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&amp;';
          }
        }
        else if(value !== undefined &amp;&amp; value !== null)
          query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&amp;';
      }
  
      return query.length ? query.substr(0, query.length - 1) : query;
    };
  
  }
  
  function LoginCtrl(user) {
    var self = this;
  
    function handleRequest(res) {
      self.responsedata = res;
      self.message = res.data.message;
  
      var authToken = res.data.auth_token;
      localStorage.setItem('token', authToken);
    }
  
    self.login = function() {
      this.requestdata = 'Starting request...';
      user.login(self.username, self.pwd, self)
        .then(handleRequest, handleRequest)
    }
  }
  
  // Login Module
  var login = angular.module('login', ["ui.router"])
  
  login.factory('authInterceptor', authInterceptor)
  login.service('user', userService)
  login.service('auth', authService)
  login.constant('API', 'http://myserver.com/api')
  </code></pre>
  
  <p><strong>EDIT -</strong> I added this into my login controller to provide the login routes</p>
  
  <pre><code>login.config(function($httpProvider, $stateProvider, $urlRouterProvider) {
  
    $httpProvider.interceptors.push('authInterceptor');
  
    $urlRouterProvider.otherwise('/login');
  
    $stateProvider
    // HOME STATES AND NESTED VIEWS ========================================
    .state('login', {
      url: '/login',
      templateUrl: 'login/login.html',
      controller: "mainLogin",
      controllerAs: "log"
    })           
    // nested list with just some random string data
    .state('dashboard', {
      url: '/dashboard',
      templateUrl: 'dashboard/dashboard.html',
    })
  
  })
  
  login.controller('mainLogin', LoginCtrl)
  </code></pre>
  
  <p>Here is my index.html:</p>
  
  <p><strong>EDIT -</strong> I removed "ng-include" and added "ng-view" to control the routes.</p>
  
  <pre><code>&lt;body ng-app="login" ng-controller="mainLogin as log" class="loginPage"&gt;
  
    &lt;div class="main" ui-view&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>As you can see I have a function that is checking for the token in the users local storage:</p>
  
  <pre><code>function authService(auth) {
    var self = this;
    self.isAuthed = function() {
      localStorage.getItem('token');
    }
  }
  </code></pre>
  
  <p>And I am loading it in the module as a service:</p>
  
  <pre><code>login.service('auth', authService)
  </code></pre>
  
  <p>This is where I am stuck. I don't know where to go from here. I don't even know if I am using my authService function properly. I am still learning a lot about AngularJS so its easy for me to get stuck. :)</p>
  
  <p>Another thing you will notice is in my index.html file I am just loading the "login/login.html" partial as default. I need it to load either login.html or dashboard.html depending if they are logged in or not. And then also route them to dashboard.html once they have successfully logged in.</p>
  
  <p>The script works great as far as hitting the auth API, authenticating the user and then storing a valid auth key on their local storage.</p>
  
  <p>Anyone know how I can accomplish this?</p>