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;
            }

        });

Why not you take a look on your debugger console? Is there any error? — Biswajit Panday
– Biswajit Panday, Commented Aug 22, 2016 at 17:44
@BiswajitPanday Thanks for your fast reply, nothing is printed in de dev console. — Jornve
– Jornve, Commented Aug 22, 2016 at 17:47
As your question is not clear, just try removing "abstract" : true from the state. It seems like the url is not an abstract parent of a child url. — Biswajit Panday
– Biswajit Panday, Commented Aug 22, 2016 at 17:49

Jornve · Accepted Answer · 2016-08-22 17:58:54Z

1

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

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

answered Aug 22, 2016 at 17:58

Jornve

3191 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related