用 CSS 控制页面内容对部分用户可见

问题

写 Web 应用的时候，经常需要写这样的 HTML 片段：

<div class="post">
  ...
  <% if current_user == post.author || current_user.admin? %>
    <a href="/posts/1/edit">edit</a>
  <% end %>
</div>

其中 edit 这个链接只显示给作者或者管理员。但如果加入用户相关的逻辑，这个片段就无法缓存了。

除了写客户端 js 修改内容外，有没有简单的方法控制内容对部分内容可见呢？

解决方法

我在分析 hey.com 页面的时候发现一种用 CSS 控制内容可见性的方法，分享如下。

修改 HTML 片段为：

<div class="post">
  ...
  <div class="hidden visible-to-user__<%= post.user_id %> visible-to-admin">
    <a href="/posts/1/edit">edit</a>
  </div>
</div>

然后在页面布局尾部加入以下内容：

<style>
  .hidden {
    display: none;
  }

<% if current_user %>
  .visible-to-user__<%= current_user.id %> {
    display: block !important;
  }
<% end %>

<% if current_user&.admin? %>
  .visible-to-admin {
    display: block !important;
  }
<% end %>
</style>

这样只用 CSS 就可以控制这部分内容对特定用户可见，并且可以将 HTML 片段缓存。

注意事项

这个方法只适用于不敏感的数据，例如上面要隐藏的内容是可以根据 ID 推测出来的。

要隐藏敏感数据，例如涉及访问权限、付费内容等，还是要用后段逻辑做判断，不能用这个方法。