如何在 angularJS 中重定向页面并禁用其他路由器？

Question

我正在尝试将首次使用的用户从登录页面引导到设置页面以进行一些配置工作。（如果是现有用户，他们将像往常一样转到主页），如果他们是第一次使用，我还需要禁用页面中的所有其他 link，除非他们完成这些设置。这是我的尝试，但由于某些原因它不起作用，请你指出我吗？非常感谢。

 angular.module('ecom').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        var expenseModalInstance;
        $urlRouterProvider.otherwise("/home");
        $stateProvider.state('home', {
            url: '/home',
            templateUrl: 'home/home.html'
        }).state('reports', {
            url: '/reports',
            templateUrl: 'submitter/reports/report-list.html'
        }).state('ebin', {
            url: '/ebin',
            templateUrl: 'submitter/ebin/ebin-expense-list.html'
        })..state('accountsetting', {
            url: '/account',
            templateUrl: 'settings/settings.html'
        }).state('accountsetting.security', {
            url: '/security',
            templateUrl: 'settings/security/security.html',
            resolve:{
                userInfor: ['$stateParams', 'userinfoservice', function($stateParams, userinfoservice){
                   var isFirstTime;
                            if ($stateParams.rid) {
                                userinfoservice.getUserinfo($stateParams.rid).then(function(data) {
                                    isFirstTime = data.isFirstTimeLogin;
                                });
                            }
                     return isFirstTime;
                    }]
            }
       }).run(['$state','$rootScope', function($state,$rootScope) {
    // var isFirstTimeUser = false;
    //     userinforservice.getUserInformation().then(function(data){
    //            isFirstTimeUser = data.isFirstTimeUser; 
    //            $rootScope.$broadcast('session:resolved', isFirstTimeUser);
    //     });
   var isFirstTimeUser = true;
    $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
        event.preventDefault();
        if(isFirstTimeUser){
            $state.go('accountsetting');
        }else{
            $state.go('home');
        }
    });
}]);

如你所见，如果是新用户我会带他们去accountsetting.security，我有决心调用服务器获取这个用户信息，如果是FirstTime return true，我会在设置安全控制器时做一些事情，而且我还需要禁用所有其他路由器，如报告、ebin 等。这是一种方法吗？或者有什么好主意可以完成吗？

Answer 1

您需要取消导航事件才能确定用户是否可以访问页面。这有点棘手，因为大多数时候此操作需要异步执行。我建议你一种方法来完成它。

在您应用的运行块中，添加一个 $stateChangeStart 事件处理程序，您将在其中执行所需的请求：

module.run((function($rootScope, $urlRouter, $state, userinfoservice){
  var isResolved = false;

  performSomeAsyncRequest()
  .then(function(data) {
    var isFirstTime = data.isFirstTimeLogin;
    $rootScope.$broadcast('session:resolved', isFirstTime);
  });

  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
    if (!isResolved && toState.name !== 'accountsetting.security') {
      event.preventDefault(); // stop the navigation

      var resolveListener = $rootScope.$on('session:resolved', function(event, isFirstTime){
        isResolved = true;
        resolveListener() // cancel event listener

        if (isFirstTime) {
          $state.go('accountsetting.security'); //redirect
        } else {
          $urlRouter.sync(); //resume previous navigation
        }
      });
    }

  });

});

现在这可能无法完全解决您的用例，我需要更多代码才能做到这一点，但它应该让您了解如何停止导航并在一些异步操作后恢复它。

如何在 angularJS 中重定向页面并禁用其他路由器？

How to redirect the page and disable other router in angularJS?

angularjs

angular-routing