在Turbo Streams中实现基于用户权限的动态UI更新

# app/views/resources/_resource.json.jbuilderjson.extract! resource, :id, :name, :description # 假设资源有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 事件    addEventListener("turbo:before-stream-render",                     (e) => { this.beforeStreamRender(e) })  }  beforeStreamRender(event) {    // 保存 Turbo Stream 默认的渲染行为    const defaultAction = event.detail.render    // 覆盖 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) {    // 检查 Turbo Stream 的操作类型，只处理 'prepend', 'append', 'update'    if (["prepend", "append", "update"].includes(streamElement.action)) {        // 获取 streamElement 中的模板内容        var template = streamElement.children[0].content        // 在模板内容中查找带有 data-resource-url 属性的元素        var templateDiv = template.querySelector('[data-resource-url]')        if (templateDiv != null) {          var id = templateDiv.getAttribute('id')          // 如果找到，则调用 setActionButtonVisibility 来更新按钮可见性          this.setActionButtonVisibility(id)        }    }  }  setActionButtonVisibility(id) {    // 根据 ID 获取已渲染到 DOM 中的资源 div    var div = document.querySelector(`div#${id}`)    if (!div) {      console.warn(`Resource div with ID ${id} not found after stream render.`);      return;    }    // 获取资源的 JSON URL    var url = div.getAttribute('data-resource-url')    // 获取编辑和删除按钮    var editButton = div.querySelector('[data-resource-action="edit"]')    var destroyButton = div.querySelector('[data-resource-action="destroy"]')    // 使用 Rails.ajax 发送 GET 请求获取权限    Rails.ajax({      type: "GET",      url: url,      success: (data, _status, _xhr) => {        try {          // 根据返回的权限数据切换按钮的 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 resource ${id}:`, status, error);      }    })  }}