Угловые мерцания при аутентификации пользователя

Question

Мне нужна помощь, устраняющая мерцание с Угловым. Я получаю мерцание каждый раз, когда проходит новый маршрут. У меня есть кнопка входа и выхода вне ng-view, которая использует ng-if = "authenticated". Проблема заключается в том, что каждый раз, когда нажимается элемент меню и отображается новое представление, мерцает кнопка выхода из системы или входа в систему. Есть ли способ устранить это? Ниже приведена функция модуля, конфигурации и запуска.

PS. Я очень новичок в Angular. Это был скрипт из учебника по использованию Angular, php и mysql для системы входа в систему.

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'toaster']); 

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
     .when('/login', { 
      title: 'Login', 
      templateUrl: 'views/login.html', 
      controller: 'authCtrl' 
     }) 
     .when('/logout', { 
      title: 'Logout', 
      templateUrl: 'views/login.html', 
      controller: 'logoutCtrl' 
     }) 
     .when('/signup', { 
      title: 'Signup', 
      templateUrl: 'views/signup.html', 
      controller: 'authCtrl' 
     }) 
     .when('/dashboard', { 
      title: 'Dashboard', 
      templateUrl: 'views/dashboard.html', 
      controller: 'authCtrl' 
     }) 
     .when('/posts', { 
      title: 'Posts', 
      templateUrl: 'views/posts.html', 
      controller: 'authCtrl' 
     }) 
     .when('/stats', { 
      title: 'Stats', 
      templateUrl: 'views/stats.html', 
      controller: 'authCtrl' 
     }) 
     .when('/ambas', { 
      title: 'Ambassadors', 
      templateUrl: 'views/ambassadors.html', 
      controller: 'authCtrl' 
     }) 
     .when('/images', { 
      title: 'Images', 
      templateUrl: 'views/images.html', 
      controller: 'authCtrl' 
     }) 
     .when('/', { 
      title: 'Login', 
      templateUrl: 'views/login.html', 
      controller: 'authCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/posts' 
     }); 
}]) 
.run(function ($rootScope, $location, Data) { 
    $rootScope.$on("$routeChangeStart", function (event, next, current) { 
     $rootScope.authenticated = false; 
     Data.get('session').then(function (results) { 
      if (results.uid) { 
       $rootScope.authenticated = true; 
       $rootScope.uid = results.uid; 
       $rootScope.name = results.name; 
       $rootScope.email = results.email; 
      } else { 
       var nextUrl = next.$$route.originalPath; 
       if (nextUrl == '/signup' || nextUrl == '/login') { 

       } else { 
        $location.path("/login"); 
       } 
      } 
     }); 
    }); 
}); 

Answer 1

Вы устанавливаете аутентифицированное значение в false при каждом старте изменения маршрута. Поэтому каждый раз, когда пользователь нажимает, чтобы изменить маршрут, вы устанавливаете его в значение false, а затем через несколько минут вы установите его в true, если аутентификация прекрасна. Это вызовет мерцание.

Итак, удалите $rootScope.authenticated = false; с обратного вызова $routeChangeStart.

$rootScope.$on("$routeChangeStart", function (event, next, current) { 
    //$rootScope.authenticated = false; <--- *remove this* 
    Data.get('session').then(function (results) { 
    ...........