Restrict user going to the inner page without login using angular-ui-route

Question

I have an angular project. In that if i type in the url as "dashboard" it is redirecting to "dashboard.html" page. But i want to restrict user going into that page without successfully logged In.

Below in my routing code please check.

index.js

angular.module('adminsuite',['ui.router','ngCookies']).config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
    .state('login', {
        url: '/',
        views:{
            pageContent:{
                templateUrl: 'Login/login.html',
                controller: 'loginController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }



    })
    // HOME STATES AND NESTED VIEWS ========================================
     .state('dashboard', {
        url: '/dashboard',
        views:{
            header:{
                templateUrl: 'common/header.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'dashboard/dashboard.html',
                 controller: 'dashboardController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }
    })
    //SURVEY STATES
    .state('survey', {
        url: '/survey',
        views:{
            header:{
                templateUrl: 'common/headerTool.html',
                controller: 'headerController'
            },
            pageContent:{
                templateUrl: 'survey/survey.html',
                  controller: 'surveyController'
            },
            footer:{
                templateUrl: 'common/footer.html',
                controller: 'footerController'
            }
        }
    });

    // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================

});

Answer 1

in your loginController store value in $rootscope if user sucessfully logged in.

if(userloggedin == true )
{
  $rootscope.loggedinuser = true
}

in your dashboardController get value from $rootscope and check if $rootscope.loggedinuser is equal to true then dasboard.html page will show otherwise page redirect to login page.

in your dashboardController

if($rootscope.loggedinuser !=true)
{
    $state.go('login');
}

Answer 2

You can do one thing. In your loginController create a variable and store that in local storage if the user successfully logged in. And in your dashboard routing statement resolve that data from local storage. The page will load to /dashboard only if it can resolve that data. If he is not logged in the resolving data will be undefined

.state('dashboard', {
    url: '/dashboard',
    views:{
        header:{
            templateUrl: 'common/header.html',
            controller: 'headerController'
        },
        pageContent:{
            templateUrl: 'dashboard/dashboard.html',
             controller: 'dashboardController'
        },
        footer:{
            templateUrl: 'common/footer.html',
            controller: 'footerController'
        }
    },
    resolve: {
       accessToken: ['$localStorage', function($localStorage){
           return $localStorage.accessToken
        }]
    }
})

OR your resolve code can be like

resolve: {
   accessToken: ['$localStorage','$state', function($localStorage, $state){
       if($localStorage.accessToken)
         return $localStorage.accessToken
       else{
         $state.go(login)
         return;
       }
    }]
}

here variable accessToken is storing to $localStorage in your loginController as

if('successfully logged in'){
  $localStorage.accessToken = 'a random value';
}

You can use sessionStorage , $cookieStore etc. instead of $localStorage . It's option of you.

There is one more option. Broadcasting a variable when login happens and resolve that data in dashboard