使用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" // 引入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 的内容，并找到带有 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)      }    })  }}