Question

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

当我的app模块运行时，首先初始化$ 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>

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

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

Answer 1

您需要在路由中使用'resolve'选项，例如 - 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

Answer 2

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

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

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

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

Answer 3

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

因此，默认情况下，如果未经过身份验证，您可以显示登录页面，如果用户登录则显示仪表板或主页，您还可以在app config中的.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

如何避免AngularJS页面轻弹

3 个答案: