Question

我有一个AngularJS应用程序，它使用UI-Router并具有身份验证和授权。

更改$ state时，我会检查身份验证和授权，如果失败，我打算重定向或请求登录。

$rootScope.$on('$stateChangeStart', function (event, toState) {
    var requiresAuth = toState.data.requiresAuth;
    if (requiresAuth) {
        var authorizedRoles = toState.data.authorizedRoles;
        if (!AuthService.isAuthorized(authorizedRoles)) {
            event.preventDefault();
            if (AuthService.isAuthenticated()) {
                // user is not allowed
                notifyError({ status: "Denied", statusText: "You don't have permission" });
            } else {
                // user is not logged in
                $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
            }
            $rootScope.$state.go('app.dashboard');
        }
    }
});

我的问题是当处于状态'app.dashboard'并尝试导航到我没有权限或未经过身份验证的状态时，我看到状态更改（视图中的breadcrumbs更改）但是$ stateChangeStart上面的代码开始并应该将状态发送回'app.dashboard'并且它确实...... 我可以调试并看到状态确实已经改回app.dashboard但是因为状态已经是'app.dashboard'而没有重新加载因此我的导航ui-sref-active指令不更新和视图（ breadcrumbs）不会更新。

<li data-ui-sref-active="active">
    <a data-ui-sref=" app.dashboard" title="Dashboard">
    <i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent"> Dashboard</span>
    </a>
</li>

这一切都有意义，因为AngularS旨在防止页面重新加载，但我不确定如何最好地解决问题。我已经从this answer那里获得了建议和代码，但是它很有用，但是我有点担心在我进一步开发应用程序时可能会引入的问题。

.config(function($provide) {
    $provide.decorator('$state', function($delegate)
    {
        $delegate.go = function(to, params, options)
        {
            return $delegate.transitionTo(to, params, angular.extend(
            {
                reload: true,
                inherit: true,
                relative: $delegate.$current
            }, options));
        };
        return $delegate;
    });

理想情况下，我更愿意在不改变UI-Router的$ state提供程序行为的情况下实现我的目标。有没有人有任何想法？

UI-Router状态未按预期更改

0 个答案: