javascript - 如何设计基于 angularJS 资源的授权路由？

Question

我正在使用 angularJS 构建一个博客系统，现在尝试构建一个对某些资源使用起来简单易用的资源授权流程。例如，我有以下状态 PROPOSALITEM、PROPOSALITEM.VIEW 和 PROPOSALITEM.EDIT。 PROPOSALITEM 是父状态，它通过为子状态提供的 :proposalId 解析 proposalItem。 PROPOSALITEM.VIEW 是允许所有用户访问的 View 状态，PROPOSALITEM.EDIT 是编辑页面，应该只允许提案所有者 访问。

我发现在 angularJS 中有一个漂亮的结构来执行基于 role 的授权流程，来自这篇文章:Techniques for authentication in AngularJS applications .但是我现在需要的是根据资源的所有权来决定用户是否可以访问该路由。我有很多资源，例如 proposal 模型，需要所有者授权进行检查。所有这些模型都带有一个 owner 列。有什么通用的解决方案来处理这个问题吗？ (我不想把每个模型的授权码放在自己的解析部分，因为这样很难维护)

/* Abstract states. Resolve proposalItem */
.state('PROPOSALITEM', {
    abstract: true,
    url: '/proposals/:proposalId',
    template: '<ui-view/>',
    resolve: {
        proposalItem: function($stateParams, ProposalDataService) {
            return ProposalDataService.getItem($stateParams.proposalId);
        }
    }
})
/* View states. Allows all users to access */
.state('PROPOSALITEM.VIEW', {
    abstract: true,
    url: '/view',
    template: '...'
})
/* Edit states. Allows only the proposal owner */
.state('PROPOSALITEM.EDIT', {
    url: '/edit',
    template: '...',
    resolve: {
        proposalItem: function($q, proposalItem, UserDataService) {
            var me = UserDataService.getMe();
            // me: {
            //     _id: '1',
            //     name: '...'
            // }
            if (proposalItem.owner._id === me._id) {
                // Authorized.
                return proposalItem;
            } else {
                // Not authorized.
                var deferred = $q.defer();
                deferred.reject(ERROR_KEYS.NOT_AUTHORIZED);
                return deferred.promise;
            }
        }
    }
})

Answer 1

这就是我通常处理这种情况的方式。创建一个应该处理身份验证的服务:

yourapp.factory('YourResourcePermission', function () {
    return {
        check: function (resource) {
            var me = UserDataService.getMe();
            // return a promise which is resolved with the data
            // if the user has permission, or rejected otherwise.
        }
    };
});

然后您将此服务用作所需状态的解析参数:

.state('PROPOSALITEM.EDIT', {
url: '/edit',
template: '...',
resolve: function (proposalItem, YourResourcePermission) {  
    return YourResourcePermission.check(proposalItem);
}

})

通过这种方式，您可以使所有权限逻辑远离专用(且可重用)服务中的路由。

如果您有几个状态需要相同的 require 样板，您可以使用 Angular $provide.decorator 自动将您的自定义逻辑注入(inject)您的状态。看到这个:https://github.com/christopherthielen/ui-router-extras/blob/master/src/dsr.js#L10还有这个https://stackoverflow.com/a/26848546/3794660作为有关如何装饰 $stateProvider 和创建基本上已经设置了“resolve”参数的自定义状态类型的引用。

希望对您有所帮助。