Stephen Schüz PRO said over 1 year ago on Hotwire Question and Answer Feature :
Thanks for this, this is gold. I’ve been banging my head against authorizations with broadcasting and, in the end, came up with a front-end solution. I basically put some info into the head about the current user:
<meta name="current-person-id" content="<%= current_user ? current_user.id : nil %>">
<meta name="current-person-admin" content="<%= current_user ? current_user.admin : nil %>">
<meta name="current-person-user" content="<%= @workout&.user == current_user ? true : nil %>">
Then I use this info in a stimulus controller, which shows/hides elements based on what user is present.
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="meta"
export default class extends Controller {
  static targets = [ "admin", "user", "published" ]

  connect() {
    // Data from meta tags
    const admin = document.querySelector('meta[name="current-person-admin"]').content
    const user = document.querySelector('meta[name="current-person-user"]').content
    const id = document.querySelector('meta[name="current-person-id"]').content
    const published = document.querySelector('meta[name="current-record-published"]').content
    const recordId = document.querySelector('meta[name="current-record-id"]').content
    
    checkAuthorisation(this.userTargets, user)
    checkAuthorisation(this.adminTargets, admin)
    checkAuthorisationPublished(this.publishedTargets, user)

    // Check if user owns record or if user is admin
    function checkAuthorisation(elements, subject) {
      elements.forEach((element) => {
        if (subject === "true" || admin === "true") {
          // Do nothing
          // element.classList.remove("hidden")
        } else {
          element.classList.add("hidden")
        }
      })
    }

    // Check if record is published, user owns record or if user is admin
    function checkAuthorisationPublished(elements, subject) {
      elements.forEach((element) => {
        if (subject === "true" || admin === "true" || published === "true") {
          // Do nothing
          // element.classList.remove("hidden")
        } else {
          element.classList.add("hidden")
        }
      })
    }
    
  }
}
On the view, I just traget the relevant elements e.g:
<%= button_to workout_block_path(block.workout, block), method: :delete, data: { controller: "meta", target: "meta.published" }, form: { data: { turbo_confirm: "Are you sure?" } }, class: "btn-styling" do %>
  <span class="emoji">🗑</span> 
<% end %>
I’m going to give your solution a spin, which is a super creative use of the framework and which seems way more robust!! Thanks again.

P.s. this is app