angularjs - ui 路由器中的访问范围或服务 onEnter 检查访问(身份验证)

Question

好的，所以我有一个 url "/securepage"的状态，每当用户尝试访问它时我都需要检查它。所以我读到有一个我可以使用的 onEnter 函数。但我似乎无法从那里获得范围或服务。我究竟做错了什么？

        .state('securepage', {
            url: "/securepage",
            template: securepage.html,
            onEnter: function(){
                // if (!$scope.main.isAuthenticated) $state.go("/login");
                // if (!myLoginService.currentUser()) $state.go("/login");

我看到的当前选项是使用解析和/或检查 Controller 中的身份验证。但是将身份验证检查放在 onEnter 中不是更好吗？

Answer 1

我今天遇到了类似的问题。花了一整天，终于想出了一个可行的解决方案，而不是这里已经建议的解决方案。

我的主要目标是找到简单有效的方法来选择性地保护某些特定网页。需要在加载或调用 HTML 或任何相关 Controller 之前执行安全检查。如果检查失败，页面可能会被转发到其他地方，而不会受到其他 Controller 的任何副作用。

我尝试了其他建议的方法。每个人都有自己的一系列问题:

使用 OnEnter:

在进行异步调用以进行安全检查时，无法阻止 ui-router 继续状态转换。

使用 $rootScope.$on('$stateChangeStart'):

需要安全检查的状态的管理将与 $stateProvider.state() 定义分开。理想情况下，我宁愿在一个地方看到有关状态定义的所有内容。虽然这不是一个引人注目的东西，但它并不理想。

一个更大的问题是 $stateChangeStart 事件没有在页面的初始加载时被调用。这是一个表演者。

我的解决方案是使用解析函数来定义一个 promise ，该 promise 将导致 View Controller 在调用它们之前等待延迟完成。这非常适合阻止 Controller 以异步方式启动。

这是我使用的代码的粗略概述:

.config(['$stateProvider', function ($stateProvider) {
    // Handler for Restricting Access to a page using the state.resolve call
    var accessRestrictionHandler = function($q, $rootScope, $state) {
            var deferred = $q.defer();

            // make sure user is logged in
            asyncCheckForLogin(function(status) {
                if (status != "Logged In") {
                    // You may save target page URL in cookie for use after login successful later
                    // To get the relative target URL, it is equal to ("#" + this.url).  
                    //      The "this" here is the current scope for the parent state structure of the resolve call.
                    $state.go("loginPage");
                }
                else    // if logged in, continue to load the controllers.  Controllers should not start till resolve() is called.
                    deferred.resolve();
            }.bind(this));

            return deferred.promise;
        };


    $stateProvider
        .state('userProfile', {
            url: '/userProfile',
            views: {
                'main': {
                    templateUrl: 'userProfile.html',
                    controller: 'userProfileCtrl'
                }
            },

            // SIMPLY add the line below to all states that you want to secure
            resolve: { loginRequired : accessRestrictionHandler } 
        })

        .state(.... some other state)
        .state(.... some other state);

}]);

我希望这会帮助你们中的一些人。