Divert to alternate homepage if user is not logged in using UI-Router & AngularJS

Question

I would like to have two home pages, the first would be for users who have not logged in and the second for users that are logged in.

This is my current set up:

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
    $httpProvider.interceptors.push('authInterceptor');
  })

  .factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
    return {
      // Add authorization token to headers
      request: function (config) {
        config.headers = config.headers || {};
        if ($cookieStore.get('token')) {
          config.headers.Authorization = 'Bearer ' + $cookieStore.get('token');
        }
        return config;
      },

      // Intercept 401s and redirect you to login
      responseError: function(response) {
        if(response.status === 401) {
          $location.path('/login');
          // remove any stale tokens
          $cookieStore.remove('token');
          return $q.reject(response);
        }
        else {
          return $q.reject(response);
        }
      }
    };
  })

  .run(function ($rootScope, $location, Auth) {
    // Redirect to login if route requires auth and you're not logged in
    $rootScope.$on('$stateChangeStart', function (event, next) {
      if (next.authenticate && !Auth.isLoggedIn()) {
        $location.path('/login');
      }
    });
  });
.config(function ($stateProvider) {
        $stateProvider
          .state('main', {
            url: '/',
            templateUrl: 'app/main/main.html',
            controller: 'MainCtrl',
            title: 'Home',
            mainClass: 'home',
            headerSearch: true
          });
      });

How could I reconfigure this so I could do something like the following:

.config(function ($stateProvider) {
    $stateProvider
      .state('welcome', {
        url: '/',
        templateUrl: 'app/welcome/welcome.html',
        controller: 'WelcomeCtrl',
        title: 'Welcome',
        mainClass: 'welcome',
        isLoggedIn: false
      });
     $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl',
        title: 'Home',
        mainClass: 'home',
        isLoggedIn: true
      });
  });

I think you should refer to this

Dharmesh Patel
– Dharmesh Patel

2014-08-12 11:38:04 +00:00
Commented Aug 12, 2014 at 11:38 — Dharmesh Patel
– Dharmesh Patel, Commented Aug 12, 2014 at 11:38
There is also module ui-router for this

Dharmesh Patel
– Dharmesh Patel

2014-08-12 11:39:37 +00:00
Commented Aug 12, 2014 at 11:39 — Dharmesh Patel
– Dharmesh Patel, Commented Aug 12, 2014 at 11:39

Community · Accepted Answer · 2017-05-23 10:28:20Z

Just wanted to show, how we can manage authentication driven access to states. Based on this answer and its plunker, we can enrich each state (which should be accessible only for authenticated users) with a data setting, explained here: Attach Custom Data to State Objects (cite:)

You can attach custom data to the state object (we recommend using a data property to avoid conflicts)...

So let's have some states with public access:

// SEE no explicit data defined
.state('public',{
    url : '/public',
    template : '<div>public</div>',
})
// the log-on screen
.state('login',{
    url : '/login',
    templateUrl : 'tpl.login.html',
    controller : 'UserCtrl',
})
...

And some with private access:

// DATA is used - saying I need authentication
.state('some',{
    url : '/some',
    template : '<div>some</div>',
    data : {requiresLogin : true }, // HERE
})
.state('other',{
    url : '/other',
    template : '<div>other</div>',
    data : {requiresLogin : true }, // HERE
})

And this could be hooked on on the state change:

.run(['$rootScope', '$state', 'User', function($rootScope, $state, User)
{

  $rootScope.$on('$stateChangeStart'
    , function(event, toState, toParams, fromState, fromParams) {

    var isAuthenticationRequired =  toState.data 
          && toState.data.requiresLogin 
          && !User.isLoggedIn
      ;

    if(isAuthenticationRequired)
    {
      event.preventDefault();
      $state.go('login');
    }
  });
}])

See all that in action here

There is similar Q & A were I try to show the concept of redirecting Authenticated and Not Authenticated user:

Angular UI Router: nested states for home to differentiate logged in and logged out

maybe that could help to get some idea, how we can use ui-router, and its event '$stateChangeStart' to hook on our decision manager - and its forced redirecting...

harishr · Accepted Answer · 2014-07-30 04:57:58Z

2

the code should be something like this

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

so if user entering the application, then if he is logged in take him to welcome else take him to home.

once he is inside, then if he hits some route which needs auth.. then redirect him to login page..

sorry if i did not understood you requirement fully...

edited Jul 30, 2014 at 4:57

answered Jul 29, 2014 at 13:05

harishr

18.1k9 gold badges84 silver badges131 bronze badges

21 Comments

Daimz Over a year ago

I gave this a try but all I got was an error saying stateChangeStart doesn't exist. I removed it so just using $rootScope.$on('$stateChangeStart'); and that didn't throw an error but instead it just didn't work.

Daimz Over a year ago

Am I meant to put this inside .run(function ($rootScope, $location, Auth) {?

Daimz Over a year ago

I found the missing colon but now I get ReferenceError: $state is not defined

Daimz Over a year ago

Ok, the now gives TypeError: undefined is not a function

harishr Over a year ago

have you inject your auth service?? can you setup plunker, ??

|

Code Whisperer · Accepted Answer · 2014-07-29 13:03:38Z

1

.config(function ($stateProvider,$rootScope) {
$stateProvider
  .state('welcome', {
    url: '/',
    templateUrl: 'app/welcome/welcome.html',
    controller: 'WelcomeCtrl',
    onEnter: function() {
      if (userIsLoggedIn()) {
         $stateProvider.go('home');
      }
  });

});

answered Jul 29, 2014 at 13:03

Code Whisperer

23.7k22 gold badges73 silver badges88 bronze badges

2 Comments

Daimz Over a year ago

I can't seem to get this working. It still just defaults to 'home'

Daimz Over a year ago

I found that a brace was missing so I get the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module cbuiRouterApp due to: Error: [$injector:unpr] Unknown provider: $rootScope

Narek Mamikonyan · Accepted Answer · 2014-08-11 14:36:29Z

0

I had problem like this and I solved it like this

 .run(function ($rootScope, $location, AuthService) {

        // start showing PRELOADER because we doing async call and we dont know when it will be resolved/rej
        AuthService.checkLoginStatus().then(
            (resp) => {
                // fire logged in user event
                $rootScope.$broadcast('userLogged',resp);
                $location.path(YourHomePageUrl);

            },
            (err)=> {  
                // Check that the user is not authorized redirect to login page                  
                    $location.path(loginURL);
                }
            }).finally(
            ()=> {
                // finnaly Set a watch on the $routeChangeStart
                /// Hide PRELOADER
                $rootScope.$on('$routeChangeStart',
                    function (evt, next, curr) {
                      if (!AuthService.isLoggedIn()) {
                                $location.path(art7.API.loginURL);
                            }

                    });
            }
        )


    });

and im not using interceptor for handling 401 not authorized errors, thats my solution

answered Aug 11, 2014 at 14:36

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

1 Comment

Narek Mamikonyan Over a year ago

Its in typescript , AuthService was my service for authentication

Collectives™ on Stack Overflow

Divert to alternate homepage if user is not logged in using UI-Router & AngularJS

4 Answers 4

Comments

21 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

21 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related