يبدأ التحميل الدوار عند تغيير المسار بمكتبة المصادقة
-
21-12-2019 - |
سؤال
أنا أستخدم مكتبة Hot Towel الزاوية (https://github.com/johnpapa/hotowel-angular-bower) في مشروع ورثته من أحد كبار المطورين.
أقوم أيضًا بدمج مكتبة المصادقة الخاصة بـ Auth0 لـ Angular.
أحتاج إلى تقييد بعض الطرق للمستخدمين المصادق عليهم.للقيام بذلك، قمت بتعيين بعض خصائص المسار.
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 لأنه لم يتم تنشيط وحدة التحكم مطلقًا وإعادة ضبطها)، كيف يمكنني حل هذه المشكلة؟
المحلول
إحدى الأفكار هي أنه يمكنك استخدام حدث ($broadcast) للإعلام عند إجراء الوصول غير المصرح به بحيث يتم استلامه بعد ذلك بواسطة وحدة التحكم التي تقوم بإيقاف تشغيل القرص الدوار.
نصائح أخرى
لم أدرس الكود الخاص بك لفترة طويلة ولكن لا ينبغي عليك استخدامه $routeChangeSuccess
لوقف الدوار؟
$scope.isViewLoading = false;
$scope.$on('$routeChangeStart', function() {
$scope.isViewLoading = true;
});
$scope.$on('$routeChangeSuccess', function() {
$scope.isViewLoading = false;
});