Question

我搜索了几个小时，但没有找到解决该问题的有效且明确的解决方案。我有一个AngularJS（1.7版）应用程序，该应用程序使用ocLazyLoad来延迟加载控制器和服务以及ui-router（1.0.20版）。我有一个公共的登录状态，所有其他受保护的状态，以及一个抽象状态（也受保护）的子级。每个状态都使用resolve属性通过ocLazyLoad延迟加载其控制器和其他所需的服务。

$stateProvider

// Login state.
.state('login',{
    templateUrl : 'app/components/login/login.html',
    controller : 'loginController',
    resolve : {
        deps : ['$ocLazyLoad',function($ocLazyLoad) {
            return $ocLazyLoad.load('app/components/login/login.js');
        }]
    },
    cache : false
})

// Main (abstract) state.
.state('main',{
    abstract : true,
    template : '<ui-view />',
    controller : 'mainController',
    resolve : {
        deps : ['$ocLazyLoad',function($ocLazyLoad) {
            return $ocLazyLoad.load('app/components/main/main.js');
        }]
    },
    cache : false
})

// Dashboard state (main state child).
.state('main.dashboard',{
    templateUrl : 'app/components/dashboard/dashboard.html',
    controller : 'dashboardController',
    resolve : {
        deps : ['$ocLazyLoad',function($ocLazyLoad) {
            return $ocLazyLoad.load('app/components/dashboard/dashboard.js');
        }]
    },
    cache : false
});

在应用run()方法中，我监听过渡onBefore事件，如下所示：

$transition.onBefore({},function(trans) {
    var name = trans.to().name;

    // Synchronous service. Checks for a valid cookie.
    var authenticated = Account.isAuthenticated();

    // If the state is not login and there is no authenticated user, redirects to the login.
    if (name!=='login' && !authenticated) {
        trans.abort();
        $state.go('login');
    }

    // Else, if the state is login and a user is authenticated, redirects to the dashboard.
    else if (name==='login' && authenticated) {
        trans.abort();
        $state.go('main.dashboard');
    }
});

我之所以使用trans.abort()是因为如果我不中止转换，则会有关于转换的错误。如果我使用并返回$state.target()（或trans.router.stateService.target()），则在单击登录按钮时遇到错误，并且如果用户成功登录，则重定向到仪表板（无法加载'app / components /仪表板/dashboard.js'）。但是，如果我在登录后手动刷新登录页面，它将成功重定向到仪表板。如果我尝试从受保护状态注销，也会发生这种情况。退出时，它必须重定向到登录状态。但是我有一个与之前相似的错误：无法加载“ app / components / login / login.js”。如果我中止转换并使用$state.go()重定向，也会发生最后一个错误。

我想知道使用ocLazyLoad保护某些路由（带有子状态）的最佳或首选方法是什么，以及如何避免所有这些错误。使用$transition.onBefore事件是否正确？还是必须在main和登录状态的resolve属性中实现这些检查？我检查了成千上万的教程和示例，但是大多数教程和示例已经过时，其他的不清楚或根据编写者的不同而有所不同。我尝试使用transition.abort()，$state.target()，$timeout，但是我总是遇到错误。

AngularJS使用ui-router和ocLazyLoad保护路由

0 个答案: