如何在Turbo Stream接收时运行自定义JS处理Rails按钮权限？

核心思路 #

既然Turbo Streams渲染时无法在后端直接判断接收者的权限，那就把权限信息提前传递到前端，在客户端通过监听Turbo的事件触发权限校验逻辑，控制按钮的显示/隐藏。

具体实现步骤 #

1. 把用户权限传递到前端

在布局文件（比如application.html.erb）中，将当前用户的项目权限序列化为JSON，存在页面的data属性里：

<body data-user-permissions='<%= current_user_project_permissions.to_json %>'>

后端需要先定义生成权限列表的方法（可以放在helper或User模型里）：

# app/helpers/application_helper.rb
def current_user_project_permissions
  permissions = { projects: { edit: [], destroy: [] } }
  # 遍历所有项目，收集当前用户有编辑/删除权限的项目ID
  Project.all.each do |project|
    permissions[:projects][:edit] << project.id if policy(project).edit?
    permissions[:projects][:destroy] << project.id if policy(project).destroy?
  end
  permissions
end

2. 编写权限校验的JS函数

创建一个通用函数，用来检查并更新所有项目按钮的显示状态：

// 可放在app/javascript/application.js或单独的控制器文件中
function updateProjectButtonVisibility() {
  // 读取页面中存储的用户权限
  const userPermissions = JSON.parse(document.body.dataset.userPermissions);
  if (!userPermissions?.projects) return;

  // 遍历所有项目项
  document.querySelectorAll('.project-item').forEach(item => {
    const projectId = parseInt(item.dataset.projectId, 10);
    
    // 控制编辑按钮
    const editBtn = item.querySelector('[data-action="project-edit"]');
    if (editBtn) {
      const hasEditAccess = userPermissions.projects.edit.includes(projectId);
      editBtn.style.display = hasEditAccess ? 'inline-block' : 'none';
    }

    // 控制删除按钮
    const destroyBtn = item.querySelector('[data-action="project-destroy"]');
    if (destroyBtn) {
      const hasDestroyAccess = userPermissions.projects.destroy.includes(projectId);
      destroyBtn.style.display = hasDestroyAccess ? 'inline-block' : 'none';
    }
  });
}

3. 关联Turbo Stream事件

有两种方式可以触发上面的函数：

方式一：全局监听Turbo事件

在application.js中监听Turbo Stream处理完成的事件，每次Turbo更新页面后自动执行权限校验：

// 页面初始加载时执行一次
document.addEventListener('DOMContentLoaded', updateProjectButtonVisibility);

// Turbo Stream完成渲染后执行
document.addEventListener('turbo:stream:completed', updateProjectButtonVisibility);

方式二：在Turbo Stream模板中直接触发

如果只需要在特定的Turbo操作（比如创建/更新项目）后执行，可以在对应的Turbo Stream模板里嵌入脚本：

# app/views/projects/create.turbo_stream.erb
<%= turbo_stream.append :projects do %>
  <div class="project-item" data-project-id="<%= @project.id %>">
    <!-- 项目内容 -->
    <button data-action="project-edit">编辑</button>
    <button data-action="project-destroy">移除</button>
  </div>
<% end %>

<script>
  // 当这个Turbo片段插入后立即执行权限校验
  updateProjectButtonVisibility();
</script>

注意事项 #

• 不要在前端暴露敏感权限信息，只传递当前用户实际需要的项目权限即可
• 如果项目数量较多，建议优化权限列表的生成逻辑（比如只返回当前用户有权限的项目，而非遍历所有项目）
• 可以结合Stimulus控制器封装逻辑，让代码更模块化

内容的提问来源于stack exchange，提问作者Christoffer Reijer