使用Turbo Streams在客户端动态处理权限控制

# app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  # ... 其他代码 ...

  def turbo_stream?
    formats.any?(:turbo_stream)
  end
  helper_method :turbo_stream?
end

<!-- app/views/resource/_resource.html.erb -->

<%= turbo_frame_tag resource do %>
  <div id="<%= dom_id resource %>"
       data-resource-url="<%= resource_path(resource, format: :json) %>">

    <!-- 资源的其他显示内容 -->

    <% # 如果是Turbo Stream请求，默认隐藏按钮，待客户端JS处理 %>
    <% # 否则，使用Pundit策略判断是否显示 %>
    <% if turbo_stream? || policy(resource).edit? %>
      <%= link_to edit_resource_path(resource),
                  class: "btn btn-primary #{'d-none' if turbo_stream?}",
                  data: { resource_action: :edit } do %>
        <i class="las la-edit"></i>
        <span class="d-none d-lg-inline">
          <%= t("buttons.edit") %>
        </span>
      <% end %>
    <% end %>

    <% if turbo_stream? || policy(resource).destroy? %>
      <%= link_to resource,
                  class: "btn btn-danger #{'d-none' if turbo_stream?}",
                  data: {
                    resource_action: :destroy,
                    turbo_confirm: t("confirm.short"),
                    turbo_method: :delete
                  } do %>
        <i class="las la-trash-alt"></i>
        <span class="d-none d-lg-inline">
          <%= t("buttons.remove") %>
        </span>
      <% end %>
    <% end %>

  </div>
<% end %>

# app/views/resources/_resource.json.jbuilder

json.extract! resource, :id, :name, :description # 假设资源有这些属性
# ... 其他资源属性 ...

json.permissions do
  json.edit policy(resource).edit?
  json.destroy policy(resource).destroy?
end

// app/javascript/controllers/turbostream_controller.js

import Rails from "@rails/ujs" // 引入Rails UJS用于AJAX请求
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 监听全局的 turbo:before-stream-render 事件
    // 这个事件在Turbo Stream内容被渲染到DOM之前触发
    addEventListener("turbo:before-stream-render",
                     (e) => { this.beforeStreamRender(e) })
  }

  beforeStreamRender(event) {
    // 捕获Turbo Stream的默认渲染行为
    const defaultAction = event.detail.render
    // 重写渲染方法，在默认渲染之后执行我们的自定义处理
    event.detail.render = (streamElement) => {
      defaultAction(streamElement) // 首先执行Turbo Stream的默认渲染
      try {
        this.processStream(streamElement) // 然后执行我们的自定义逻辑
      } catch(error) {
        console.error("Error processing Turbo Stream:", error)
      }
    }
  }

  processStream(streamElement) {
    // 只处理 'prepend', 'append', 'update' 类型的Turbo Stream操作
    if (["prepend", "append", "update"].includes(streamElement.action)) {
        // Turbo Stream元素通常包含一个 <template> 标签
        // 我们需要获取 template 的内容，并找到带有 data-resource-url 的元素
        const template = streamElement.children[0].content
        const templateDiv = template.querySelector('[data-resource-url]')

        if (templateDiv != null) {
          const id = templateDiv.getAttribute('id')
          this.setActionButtonVisibility(id) // 调用函数更新按钮可见性
        }
    }
  }

  setActionButtonVisibility(id) {
    // 根据ID找到新渲染的资源元素
    const div = document.querySelector(`div#${id}`)
    if (!div) {
        console.warn(`Resource div with id ${id} not found.`)
        return
    }

    const url = div.getAttribute('data-resource-url')
    const editButton = div.querySelector('[data-resource-action="edit"]')
    const destroyButton = div.querySelector('[data-resource-action="destroy"]')

    if (!url) {
        console.warn(`Resource div with id ${id} missing data-resource-url.`)
        return
    }

    // 使用Rails UJS发送AJAX GET请求获取权限
    Rails.ajax({
      type: "GET",
      url: url,
      success: (data, _status, _xhr) => {
        try {
          // 根据API响应中的权限数据，切换按钮的 'd-none' 类
          if (editButton) {
            editButton.classList.toggle('d-none', !data.permissions.edit)
          }
          if (destroyButton) {
            destroyButton.classList.toggle('d-none', !data.permissions.destroy)
          }
        } catch(error) {
          console.error("Error updating button visibility:", error)
        }
      },
      error: (xhr, status, error) => {
        console.error(`Failed to fetch permissions for ${url}:`, status, error)
      }
    })
  }
}

<!-- app/views/resource/index.html.erb -->

<div data-controller="turbostream">
  <!-- 你的原始资源列表代码，例如： -->
  <%= turbo_stream_from "resources" %>
  <div id="resources">
    <% @resources.each do |resource| %>
      <%= render resource %>
    <% end %>
  </div>
</div>