AngularJS - Checking if a user is authenticated and then routing them to the correct page

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:

  1. Check if they have a valid auth token stored on their local storage and if they do then load template/partial "dashboard/dashboard.html" into the index.html if they don't have a valid auth key then load the login template/partial located "login/login.html".
  2. Once they have successfully logged in I want them to be routed to "dashboard/dashboard.html"

Here is my login script:

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) && 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<value.length; ++i) {           subValue = value[i];           fullSubName = name + '[' + i + ']';           innerObj = {};           innerObj[fullSubName] = subValue;           query += param(innerObj) + '&';         }       }       else if(value instanceof Object) {         for(subName in value) {           subValue = value[subName];           fullSubName = name + '[' + subName + ']';           innerObj = {};           innerObj[fullSubName] = subValue;           query += param(innerObj) + '&';         }       }       else if(value !== undefined && value !== null)         query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';     }      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', [])  login.factory('authInterceptor', authInterceptor) login.service('user', userService) login.service('auth', authService) login.constant('API', 'http://myserver.com/api')  login.config(function($httpProvider) {   $httpProvider.interceptors.push('authInterceptor'); })  login.controller('mainLogin', LoginCtrl) 

Here is my index.html:

<body ng-app="login" ng-controller="mainLogin as log" class="loginPage">    <div class="main" ng-include="'login/login.html'"></div>  </body> 

As you can see I have a function that is checking for the token in the users local storage:

function authService(auth) {   var self = this;   self.isAuthed = function() {     localStorage.getItem('token');   } } 

And I am loading it in the module as a service:

login.service('auth', authService) 

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. :)

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.

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.

Anyone know how I can accomplish this?

Replay

Category: javascript Time: 2016-07-28 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.264 (s). 12 q(s)