angular-ui - UI-路由器 : Change url without loading state or defer loading the state?

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();并加载 View 。

但是，如果您从一个页面导航到另一个页面，这就是应该发生的情况:

• 用户在/pageA 上，点击指向/pageB 的链接(他无权访问)
• URL 更改为/pageB
• 未加载 ui-view，而是弹出登录模式
• 登录完成后，模式关闭，加载 ui-view

相反发生的是这样的:

• 用户在/pageA 上，点击指向/pageB 的链接(他无权访问)
• 网址在/pageA
• 弹出登录模式
• 登录完成后，模式关闭，但您仍在页面 A 上。

所以我真正想要的是 url 实际上更改为/pageB 但 ui-view 在您调用同步之前不会加载。

Answer 1

您是否考虑过在您的身份验证 $stateChangeStart 监听器中保存 toState 和 angular.copy(toParams)，然后在用户登录后触发 $state.go？

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

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