angular ui - ui - router:在不加载状态的情况下修改url，或者延迟加载状态

Question

我在我的项目中使用angular-ui的UI-Router，并且在状态更改时，我想检查用户是否可以访问页面。如果没有，我会弹出一个登录模式。

$rootScope.$on('$stateChangeStart', function(evt, toState) {
    if (!authentication.authorize(toState.data.access)) {
        evt.preventDefault();
        $state.go('login', {}, {notify: false});
    }
});

登录状态，使用UI-Bootstrap中的模态:

angular.module('components.security').config(function($stateProvider) {
    $stateProvider.state('login', {
        onEnter: function($state, $modal) {
            $modal.open({
                templateUrl: "/components/security/login.html",
                controller: 'LoginCtrl as controller'
            });
        }
    });
});

它在第一页加载时工作得很好:ui-view没有渲染，登录模式弹出，当用户登录时，我调用$urlRouter.sync();并加载视图。

然而，如果你从一个页面导航到另一个页面，应该是发生的:

• 用户在/pageA上，点击到/pageB的链接(他没有访问权限)
• Url更改为/pageB
• ui视图没有加载，而是弹出登录模式
• 登录完成后，模式关闭，ui-view加载

实际上是这样的:

• 用户在/pageA上，点击到/pageB的链接(他没有访问权限)
• Url保持在/pageA
• 登录模式弹出
• 登录完成后，模式关闭，但您仍在a页。

所以我真正想要的是url变成/pageB但是ui-view不会加载直到你调用sync。

Answer 1

您是否考虑过在您的认证$stateChangeStart侦听器中保存toState和angular.copy(toParams)，然后触发$state ?在用户登录后继续?

当用户转换到/pageB时，URL没有设置为/pageB，因为当您使用preventDefault时，转换被阻止(并且URL被重置为pageA):

        if ($rootScope.$broadcast('$stateChangeStart', to.self, toParams, from.self, fromParams).defaultPrevented) {
          syncUrl();
          return TransitionPrevented;
        }