如何避免 AngularJS 页面闪烁答案

【问题标题】：How to avoid AngularJS page flick如何避免 AngularJS 页面闪烁
【发布时间】：2016-06-30 22:44:39
【问题描述】：

我是 AngularJS 的新手，并创建了我的第一个单页应用程序。我创建了各种路由，其中一个用于主页（/），另一个用于登录（/login）。

当我的应用程序模块运行时，它首先初始化 $rootScope.authentication = false;并验证用户是否已登录，如果未登录，则将用户重定向到 /login 页面，否则返回主页。

var myApp = angular.module('myApp', ['ngRoute']);
myApp.run(function($rootScope, $http, $location, $routeParams){
$rootScope.authenticated = false;
$rootScope.$on("$routeChangeStart", function(e, current, previous){
    $http.get('api/user/authenticated')
        .then(function(res){
            if(res.data.authenticated == true && angular.isDefined(res.data.authenticated)) {
                $rootScope.authenticated = res.data.authenticated;
                $rootScope.clinicname = res.data.clinic_name;
                $rootScope.email = res.data.email;

                if(angular.isDefined(previous)) {
                    if (angular.isObject(current.$$route) && angular.isObject(previous.$$route)) {
                        if (current.$$route.originalPath === '/login') {
                            $location.path(previous.$$route.originalPath);
                        }
                    }
                }
            }
            else {
                $rootScope.authenticated = false;
                if (angular.isObject(current.$$route)) {
                    if (current.$$route.originalPath !== '/login') {
                        $location.path('/login');
                    }
                }
            }
        });
});
  console.log($rootScope);
});

index.html

<body class="hold-transition skin-blue sidebar-mini">
<div ng-if="authenticated == false">
    <section class="content-header">
        <div ng-view></div>
    </section>
</div>

<div ng-if="authenticated" class="wrapper">
         <!-- Content here !-->
         <div class="content-wrapper">
         <section class="content-header">
             <div ng-view></div>
         </section>
    </div>
</div>

现在的问题是，当用户未登录时，先显示一瞥首页，然后快速跳转到登录页面。

我想以某种方式处理这部电影。我做错了什么？

【问题讨论】：

您的“index.html”代码是什么样的？也请在这里发布。
更新了，请看

标签： javascript angularjs

【解决方案1】：

您需要在路由中使用“解决”选项，例如 - how to redirect to another page in routeProvider in resolve condition。有关“解决”的更多信息，请点击此链接 - http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

【讨论】：

【解决方案2】：

您应该使用 ui-router 或 router 来实现您在此处尝试执行的操作。 ui路由器请关注this，简易路由器请关注this。

所以默认情况下，如果未通过身份验证，您可以显示登录页面，如果用户登录，则显示仪表板或主页，您还可以在应用配置中的 .run 方法中检查用户身份验证

类似的东西

.run(function($rootScope, $state, $stateParams,adminAuthentication,$location) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
        if (!adminAuthentication.isAdmin()) {
            event.preventDefault();
            $location.path('/login');
        }

查看这些链接 ex 1 ex 2

【讨论】：

【解决方案3】：

您想要的是在您的路由的 onEnter 回调中执行您的身份验证逻辑。

此事件将在继续执行之前完全解决，这意味着如果身份验证（或您需要执行的任何其他逻辑）失败，用户可以被重定向并且永远不会看到他们试图访问的路由。

.state("homepage", {
              url: "/",
              controller: 'homepageController',
              templateUrl: "/homepage.html",
              onEnter: ['$state', 'authService', function ($state, authService) {
                  if (!authService.hasPermission(this.name)) {
                      $state.go('login');
                  }
              }]
          })

在此示例中，我使用服务来检查用户是否有权访问此路由，但您可以在此处执行您需要的任何逻辑。

【讨论】：