主干视图的声明式授权（权限）

Question

前言： 任何来自 Rails 社区的人都可能熟悉在服务器端声明模型操作授权的 cancan。 IE。可以吗？(:read, Project)

背景：但是，在前端的 UI 层中，我还没有找到任何提供相同类型的抽象来处理用户看到的内容和他们有权做的事情（显然总是有一个后端身份验证层） .例如，您是否向用户显示按钮？我们是否包含“contenteditable”元素属性？如果用户点击“喜欢”，我们会尝试注册还是向他们显示登录对话框？

问题：有人知道处理此类 UI 问题的框架/工具/库/最佳实践吗？

跟进：问题是在视图中还是在模板中进行评估？这是模板语言的特性还是我们传入模板的一组布尔变量？

除此之外： 我有一个 cancan 模仿工具的想法，其中方法签名类似于 App.can('like',project,user)，其中 project 和 user 是 BB 模型对象。但问题可能是用户可能能够对任何给定对象执行的不同操作的数量。 IE。喜欢项目、编辑项目、评论项目、邀请朋友加入项目等。其中一些可以简化为 RESTful 操作，但我认为大多数人会同意 UI 呈现更多类型的操作。

Answer 1

我们在项目中遇到了同样的情况，页面中的所有内容都应该根据授予用户的权限显示和隐藏，这是我想出的解决方案。

您需要先在用户中保存权限并在客户端加载它们；然后您可以按如下方式检查它们

1-在你的基础视图中声明“filterByPermission”函数（你所有的视图都应该继承这个）

class SampleProject.Views.BaseView extends Backbone.View

  filterByPermission:=>
    #these views will be removed incase user does not have a specific permission
    if @views_permissions?
      for permission, selector of @views_permissions
        unless SampleProject.current_user.has_permission permission
          @$(selector).remove()

    #these views will be removed incase user has a specific permission
    if @remove_views_permissions?
      for permission, selector of @remove_views_permissions
        if SampleProject.current_user.has_permission permission
          @$(selector).remove()

2-然后您可以进入另一个继承基本视图的视图并在“views_permissions”中定义您的权限（类似于事件哈希）

class SampleProject.Views.UsersIndex extends SampleProject.Views.BaseView
  views_permissions:
    "create_users":  "#js_create_user_li, #new_user_modal"
    "import_users": "#js_import_btn_li, #import_form_li"
    "edit_users"  :  "#edit_user_modal"
    "delete_users"  :  "#js_delete_user_li, .js-user-selector-header"

  render:=>
    #render your view here
    @filterByPermission()

3-在渲染视图后调用@filterByPermission()。

这样您就可以在一个地方根据权限控制视图，而无需在整个代码中添加 if 语句

Answer 2

不确定到底有哪些框架，但您可以让 Rails 或您使用的任何服务器端框架将您的权限呈现为 JavaScript 对象。

例如：

var userAuth = { userId: 1234, userType: 'Admin',
                 /** A little more complex permission scenario */
                 privileges: [{ProjectA: 'admin'}, 
                              {ProjectB: 'user'}, 
                              {ProjectC: 'noaccess'}]};

因此在您的视图或模板中，您可以根据当前登录用户的权限以声明方式呈现一段 UI 元素。例如，使用 Underscore 模板，您可以执行一些 JavaScript 逻辑和检查。

/** Operate using a declared variable */
<% if (userAuth.userType === 'Admin') {%>
    <div>This is only shown to admin.</div>
<% } %>

/** OR operate on the actual property on the working model */
<% if (myModelProperty === 'Admin') {%>
    <div>This is only shown to admin.</div>
<% } %>

这种类型的检查也可以在实际的View本身中进行，以根据用户等限制某些功能。