Angular UI-router: URL is changing but view keeps loading (preloader)

Question

I have a problem that i can't figure out. I'm trying to prevent not authenticated users from accessing my webapp. When i try to visit a restricted page (example /profile), the url of the application changes to /login but my preloader keeps loading the state. When i hard refresh the page then the login page is loaded properly.

When i'm logged in and manually remove my token and change state by clicking on a link, ui-router redirects me also to the login page.

So the problem only occurs when not logged in users trying to access the webapp by url (www.example.com/#/profile).

I think it's something small but i really have no clue where to look...

App.states.js

.state("restricted", {
                abstract: true,
                url: "",
                templateUrl: 'app/views/restricted.html',
                resolve: {
                    deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                        return $ocLazyLoad.load([
                            'lazy_uikit',
                            'lazy_selectizeJS',
                            'lazy_switchery',
                            'lazy_prismJS',
                            'lazy_autosize',
                            'lazy_iCheck',
                            'lazy_themes',
                            'sweetAlert'
                        ]);
                    }]
                },
                data: {
                    authenticationRequired: true
                }
            })

App.js

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

           console.log(toState.data.authenticationRequired);

            if(toState.data.authenticationRequired){
                if(!AuthService.isAuthenticated()){
                    event.preventDefault();
                    $state.go('login');
                }
            }


            // main search
            $rootScope.mainSearchActive = false;
            // secondary sidebar
            $rootScope.sidebar_secondary = false;
            $rootScope.secondarySidebarHiddenLarge = false;
            // full header
            $rootScope.fullHeaderActive = true;
            // accordion mode in Menu
            $rootScope.menuAccordionMode = true;

            if($($window).width() < 1220 ) {
                // hide primary sidebar
                $rootScope.primarySidebarActive = false;
                $rootScope.hide_content_sidebar = false;
            }
            if(!toParams.hasOwnProperty('hidePreloader')) {
                $rootScope.pageLoading = true;
                $rootScope.pageLoaded = false;
            }

        });

Answer 1

I found the solution, adjust $state.go('login') with

$state.transitionTo('login', {}, { reload: true, inherit: true, notify: true});