角UI路由器：如何推迟呈现模板，直到授权完成？ [英] Angular ui-router: How to defer rendering the template until authorization is complete?

问题描述

我的UI-路由器配置是这样的：

My ui-router configuration is this:

$stateProvider
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'sidemenu/sidemenu.html',
    controller: 'SideMenuCtrl'
  })
  .state('login', {
    url: '/login',
    templateUrl: 'login/login.html',
    controller: 'LoginCtrl'
  })
  .state('app.dashboard', {
    url: '/dashboard', 
    views: {
      menuContent: {
        templateUrl: 'dashboard/dashboard.html',
        controller: 'DashboardCtrl'
      }
    }
  })
  [More states here]

$urlRouterProvider.otherwise('/app/dashboard');

当用户浏览到 /应用/仪表板我要检查，如果他们被授权，然后：

When user navigates to /app/dashboard I would like to check if they are authorized, and then:

• 重定向到 /登录，如果他们没有被授权，或


• 允许查看仪表盘，如果他们被授权

• redirect to /login if they are not authorized, or
• allow to see the dashboard if they are authorized

这似乎这样的伎俩：（基于的这个例子）

This seems to do the trick: (based on this example)

$rootScope.$on('$stateChangeSuccess', function(event) {
  var path = $location.path();

  if (path === '/login') {
    return;
  }

  // Halt state change from even starting
  event.preventDefault();

  Auth.getCurrentUser().then(function(currentUser) {
    if (currentUser === null) {
      $state.go('login');
    } else {
      // Continue with the update and state transition
      $urlRouter.sync();
    }
  });
});

这个解决方案的唯一的问题是，如果一个非授权用户浏览到仪表板，仪表板模板是可见光第一。只有当授权响应是回来它改变到登录模板。

The only problem with this solution is that, if a non-authorized user navigates to the dashboard, the dashboard template is visible first. Only when the authorization response is coming back it changes to the login template.

有没有办法不显示仪表板，而我们授权的用户？

Is there a way not to show the dashboard while we authorize the user?

我也试图改变 $ stateChangeSuccess 到 $ stateChangeStart ，但它并没有真正的工作（路由似乎，然后被彻底打破）。

I also tried to change $stateChangeSuccess to $stateChangeStart, but it didn't really work (routing seems to be completely broken then).

推荐答案

有关使用下决心块怎么办？

What about using a resolve-block?

.state('app.dashboard', {
    url: '/dashboard', 
    views: {
        menuContent: {
            templateUrl: 'dashboard/dashboard.html',
            controller: 'DashboardCtrl',
            resolve: {
                login: function($q, Auth) {
                    var deferred = $q.defer();
                    Auth.getCurrentUser().then(function(currentUser) {
                        if (currentUser == null) {
                            deferred.reject();
                        } else {
                            deferred.resolve();
                        }
                    });
                    return deferred.promise;
                }
            }
        }
    }
})

状态变化不会发梗，直到承诺解决这样的模板不应该被显示。拒绝承诺将引发 $ stateChangeError 根据这个答案，以便你需要处理的错误和重定向到登录页面。

The state-change won't happed untill the promise is resolved so the template should not be showing. Rejecting the promise will raise a $stateChangeError according to this answer so you would need to handle that error and redirect to the login-page.

这篇关于角UI路由器：如何推迟呈现模板，直到授权完成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！