How to allow multiple URLs before someone signs in using token auth, Angular

Question

I am using token auth and currently if a user is not signed in they are directed to the url path of '/login', I want to allow users to go to the path '/createUser'. The code below is what directs users to the login page if they are not logged in. How would I allow users to navigate to the '/createUser' path if they are a new user?

angular.module('Demo', [
    'ngRoute'
]).run(function(
  $rootScope,
  $location,
  $http,
  $window,
  AuthFactory,
  UserFactory,
  TitleFactory,
  SkillsFactory
) {
  $rootScope.$on('$routeChangeStart', function(event, next) {
      console.log(next);
      if (AuthFactory.isAuthenticated()) {
        $http.defaults.headers.common['Authorization'] = 'Token token=' + $window.sessionStorage.getItem('demo.user');

      UserFactory.fetch();
      TitleFactory.fetch();
      SkillsFactory.fetch();
    } else {
     $location.path('/login');
   }
   });
});

checkout this [link](http://stackoverflow.com/questions/16139660/angularjs-basic-example-to-use-authentication-in-single-page-application) the answer from Alex — harishr, Nov 23 '14 at 17:56

score 0 · Answer 1 · answered Nov 23 '14 at 17:34

Have a look at ui-router, which allows you to create state hierarchy. With state hierarchy you can add a "redirect if not logged in" logic just to your 'authenticated' state (ancestor of all states requiring authentication) and let the user switch between other states without any trouble.

harishr · Answer 2 · 2014-11-23T18:28:11.733

below answer is having ui-router example but you can use similar concept with ng-route as well.

add a property on your router object to indicate whether that route needs authetication or not

.config(function ($stateProvider) {
    $stateProvider
      .state('welcome', {
        url: '/',
        templateUrl: 'app/welcome/welcome.html',
        controller: 'WelcomeCtrl',
        **needsAuth: false**
      });
     $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl',
        **needsAuth: true**
      });
  });

then on the route change, if the page is secured and user is not logged in then redirect him to login page, else let the normal process continue...

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState)                { //, fromParams
       console.log(toState.name + "," + fromState.name);
           if (toState.needsAuth && !Auth.isLoggedIn()) {
               $toState.go('login');
               event.preventDefault();
           }
    }

doesn't the parameter on the stateProvider object need to be "authenticate" to match ````if(toState.authenticate```` etc? — gabereal, Nov 23 '14 at 18:25

score 0 · Answer 3 · answered Nov 23 '14 at 18:30

I added a conditional to see if the path is '/createUser' and because the $routeChangeStart is fired before every change of route, if the user goes to '/createUser' it will not check to see if the user is authenticated. Simplest way I found to go about the problem. If anyone notices any flaws in the answer please let me know.

$rootScope.$on('$routeChangeStart', function(event, next) {
  if ($location.path() === '/createUser'){
  } else if (AuthFactory.isAuthenticated()) {
    $http.defaults.headers.common['Authorization'] = 'Token token=' + $window.sessionStorage.getItem('demo.user');
    UserFactory.fetch();
    TitleFactory.fetch();
    SkillsFactory.fetch();
} else {
  $location.path('/login');
}
});

while this does work, what if you have one more route which doesnt need authentication. hence i prefer the configurable/boolean variable based approach — harishr, Nov 23 '14 at 18:36

How to allow multiple URLs before someone signs in using token auth, Angular

3 Answers3