在Turbo Streams中实现基于用户权限的客户端动态按钮显示

# app/views/resources/_resource.json.jbuilderjson.extract! resource, :id, :name, :description # 提取其他字段json.permissions do  json.edit policy(resource).edit?  json.destroy policy(resource).destroy?end

// app/javascript/controllers/turbostream_controller.jsimport Rails from "@rails/ujs"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的默认渲染函数    const defaultAction = event.detail.render    // 覆盖Turbo的渲染函数，在默认渲染完成后执行我们的processStream方法    event.detail.render = (streamElement) => {      defaultAction(streamElement) // 先执行Turbo的默认渲染      try {        this.processStream(streamElement) // 再执行我们的自定义处理      } catch(error) {        console.error("Error processing Turbo Stream:", error)      }    }  }  processStream(streamElement) {    // 检查streamElement的action是否是会添加或更新DOM的类型    if (["prepend", "append", "update"].includes(streamElement.action)) {        // streamElement.children[0].content 是一个 DocumentFragment，包含即将渲染的HTML        var template = streamElement.children[0].content        // 在DocumentFragment中查找带有 data-resource-url 的元素        var templateDiv = template.querySelector('[data-resource-url]')        if (templateDiv != null) {          // 获取资源的ID，用于后续在DOM中查找已渲染的元素          var id = templateDiv.getAttribute('id')          if (id) {            this.setActionButtonVisibility(id)          }        }    }  }  setActionButtonVisibility(id) {    // 在实际的DOM中查找刚刚渲染的资源元素    var div = document.querySelector(`div#${id}`)    if (!div) return; // 如果元素不存在，则退出    var url = div.getAttribute('data-resource-url')    var editButton = div.querySelector('[data-resource-action="edit"]')    var destroyButton = div.querySelector('[data-resource-action="destroy"]')    if (!url || (!editButton && !destroyButton)) {      // 如果没有URL或没有权限按钮，则无需处理      return;    }    // 发起AJAX请求获取权限    Rails.ajax({      type: "GET",      url: url,      dataType: "json", // 明确指定期望的响应类型为JSON      success: (data, _status, _xhr) => {        try {          if (data && data.permissions) {            // 根据返回的权限数据切换按钮的 '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);      }    })  }}