prevent $state from reloading

I'm using Angular 1.3 and Angular UI Router and want to check user auth before loading a page.

For some reason, if $q.reject() is returned, the page is reloaded anyway (I can see it reload, and see requests made in the httpInterceptors ).

I don't want any reloading of the page to happen. If $q.reject is returned, it should simply change back to home state in the URL bar.

Yet, each time a rejection is returned, it starts loading the next page and then redirects. How can I prevent a page reload?

Code :

a) Resolve user profile and then test their access

.state('user.agent-admin', {
  url: '/agent-admin',
  templateUrl: 'views/users/agent-admin.tpl.html',
  controller: 'userAgentAdminCtrl',
  resolve: {
    ProfileLoaded : ['$rootScope', function ($rootScope) {
      return $rootScope.loadProfile();
    }],
    access: ['Access', 'ProfileLoaded', function (Access, ProfileLoaded) {
      // could be true or $q.reject(); 
      return Access.hasORRoles(['admin']);
    }]
  }
});

b) load profile

 $rootScope.loadProfile = function () {
   if (Session) {
     return $q.when(Session);
   } else {
     return User.getProfile().then(function (res) {
       ... // set session to user then return
       return $q.when(Session);
     });
   }
 };

c) On $q.reject() , this shouldn't reload the page, on change URL state back to what it was and prevent the page from loading.

 $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
   if (error === 400) {
     $state.go('user.home');
   }
 });

---

Note : I do have an abstract parent state which has a controller that has http calls, so this explains the requests made. But doesn't explain why the page needs to reload.

.state('user', {
  templateUrl: 'views/users/master-user.tpl.html',
  url: '',
  abstract: true,
  controller: 'userMaster'
})

---

Trying with $stateChangeStart also reloads the page:

 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
   Access.hasORRoles(['admin']).then(function (res) {
  }, function (err) {
    if (toState.name == 'user.agent-admin') {
      $state.go('user.home');
    }
  });
 });

---

I've also tried:

a) Rejecting directly

.state('user.agent-admin', {
  url: '/agent-admin',
  templateUrl: 'views/users/agent-admin.tpl.html',
  controller: 'userAgentAdminCtrl',
  resolve: {
    test: function ($q) {
      return $q.reject(301);
    }
    ...

 $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
   if (error === 301) {
     $state.go('user.home');
   }
 });

b) Preventing default (suggested here)

 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
   $q.reject().then(function (res) {
  }, function (err) {
      event.preventDefault();
  });
 });

c) Using new UI Router 1.0.0 Alpha $transitions.onBefore events:

  // resolve user profile before any transitions begin
  $transitions.onBefore({to: 'user.*', from: '*'}, function(trans, state) {
   var substate = trans.to();
   return $rootScope.loadProfile().then(function (prof) {
      if (substate.name == 'user.agent-admin') {
        return Access.hasORRoles(substate.data.roles);
      }
      return true;
    });
  });

  $transitions.onError({}, function(trans) {
    var error = trans && trans._error;
    if (error == 301) {
        $state.go('user.home');
    }
    ...
  });

None which prevent the state change & page reload.

链接地址: http://www.djcxy.com/p/77954.html

上一篇: 更改网址而不重新加载（angularjs //后续问答）

下一篇: 阻止$ state重新加载