Question

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

 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，我决定调用服务器来获取这个用户信息，如果isFirstTime返回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中的其他路由器？

1 个答案: