Multiple url changes with $routeChangeStart

Question

Hi all I having a hard time figuring this out and ran out of ideas. I have this website which I should restrict some urls if the user has no authentication. I reviewed some questions and found something similar to this. But it is not quite what I wanted it to be.

So I have some link which do not require user authentication but can access the url.

Other link which needs both, access and user authentication.

So this is my app.js looks

angular.module('efutures', [
    'ngRoute',
    'ngCookies',
    'ui.bootstrap',



]).config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {

    $routeProvider.when('/login', {
        templateUrl: 'app/pages/login.html',
        controller: 'LoginController',
        access: {
            allowAnonymous: true   //no need auth
        }
    })
        .when('/signup', {
            templateUrl: 'app/pages/Signup.html',
            controller: 'SignupController',
            access: {
                allowAnonymous: true           //no need auth
            }
        })
        .when('/enteremail', {
            templateUrl: 'app/pages/reset pages/reenteremail.html',
            controller: 'EmailController',
            access: {
                allowAnonymous: true   //no need auth
            }
        })
        .when('/password-reset', {
            templateUrl: 'app/pages/reset pages/password.reset.html',
            controller: 'ResetPwdController',
            access: {
                allowAnonymous: false   //needs auth
            }
        })
    .when('/dashboard', {
        templateUrl: 'app/pages/dashboard.html',
        controller: 'DashboardController',
        access: {
            allowAnonymous: false    //needs auth
        }
    })
    .when('/registration', {
        templateUrl: 'app/pages/registration1.html',
        controller: 'registationController'
        access: {
           allowAnonymous: false     //needs auth
        }
    });

    $routeProvider.otherwise({
        redirectTo: '/login'
    });



}]).run(run);

run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {

    $rootScope.hasauth = localStorage.getItem('hasauth');

    $rootScope.username = localStorage.getItem('username');

    $rootScope.$on('$routeChangeStart', function (event, next, current) {
        //console.log($rootScope.hasauth);
        //console.log(next.access.allowAnonymous);
        if (next.access.allowAnonymous || $rootScope.hasauth === null) {
            $location.path('/login');

        }
        else {
            event.preventDefault();
        }
        
    });

}

So as above explains code, I have 3 pages which doesn't need authentication and can be allowed to access the urls. Also after Logged in I should restrict going back to those 3 pages but should access other remaining ones

the authentication is taken by the loacalStorage hasauth which returns true when logged in and null when not.

How do I approach this? Help is greatly appreciated.