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的链接（他无权访问）
网址更改为/ pageB
未加载ui-view，而是弹出登录模式
登录完成后，模态关闭，ui-view加载

相反，会发生什么：

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

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

Answer 1

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

当用户转换到该URL时，URL未设置为/ pageB，因为当您阻止默认时，将阻止转换（并且将URL重置为pageA）：

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

UI-Router：更改URL而不加载状态或延迟加载状态？

1 个答案: