使用身份验证库在 routechangestart 上加载微调器答案

【问题标题】：Spinner loading on routechangestart with Authentication library使用身份验证库在 routechangestart 上加载微调器
【发布时间】：2014-07-30 15:24:41
【问题描述】：

我在从一位高级开发人员那里继承的项目中使用 Hot Towel 角度库 (https://github.com/johnpapa/hottowel-angular-bower)。

我还在为 Angular 合并 Auth0 的身份验证库。

我需要将一些路由限制为经过身份验证的用户。为此，我设置了一些路由属性。
isLogin: true 用于仅限未经身份验证的用户的路由。
requiresLogin: true 用于需要身份验证的路由，而对于那些不需要身份验证的路由则相反。为了在每次运行时检查这些属性，我使用$rootScope.$on('$routeChangeStart' function())。

app.run(function ($rootScope, $location, auth, common, config) {
    var getLogFn = common.logger.getLogFn,
        log      = getLogFn('auth handle'),
        events   = config.events;

    $rootScope.$on('$routeChangeSuccess', function (e, nextRoute, currentRoute) {
        if (nextRoute.$$route && nextRoute.$$route.settings && nextRoute.$$route.settings.requiresLogin) {
            if (!auth.isAuthenticated) {
                $location.path('/login');
                log('User not authenticated');
            }
        }
        if (nextRoute.$$route && nextRoute.$$route.settings && nextRoute.$$route.settings.isLogin) {
            if (auth.isAuthenticated) {
                $location.path('/');
                log('User is authenticated');
            }
        }
    })
});

现在，这似乎干扰了 Hot-Towel 附带的微调器功能。在 Shell.js 中，我发现以下内容：

$rootScope.$on('$routeChangeStart',
    function (event, next, current) { toggleSpinner(true); }
);

$rootScope.$on(events.controllerActivateSuccess,
    function (data) { toggleSpinner(false); }
);

$rootScope.$on(events.spinnerToggle,
    function (data) { toggleSpinner(data.show); }
);

会发生什么情况是微调器永远不会停止旋转（例如 vm.isBusy = true，因为控制器永远不会被激活并重置它），我将如何解决这个问题？

【问题讨论】：

标签： javascript angularjs authentication hottowel

【解决方案1】：

一个想法是，您可以使用事件 ($broadcast) 来通知何时进行了未经授权的访问，以便控制器接收它并关闭微调器。

【讨论】：

在 app.run 方法中这样做$rootScope.$broadcast(events.controllerActivateSuccess, true);，但微调器继续滚动。完整地使用该方法更新了 OP。不过，感谢您的回复。
太早了。您需要在您调用的异步任务完成后执行此操作。如果这是一个身份验证任务（听起来像），那么在完成后调用该事件以关闭微调器。
好吧，我明白了！好吧，我暂时用 $timeout 解决了这个问题，并利用了常见的 activateController 方法，但我真的不喜欢我的解决方案。我注意到我正在使用的 auth 库会在登录成功时触发一个事件，因此我可以在发生这种情况时触发 controllerActivateSuccess 并且我会很成功。

【解决方案2】：

我很久没研究你的代码了，但你不应该用$routeChangeSuccess 来停止微调器吗？

$scope.isViewLoading = false;
$scope.$on('$routeChangeStart', function() {
    $scope.isViewLoading = true;
});
$scope.$on('$routeChangeSuccess', function() {
    $scope.isViewLoading = false;
});

【讨论】：

微调器包含在第三方库中，我在最初的问题中对此进行了解释。