内容可见性控制

项目访问链接

https://zion.functorz.com/tool/1qjzLgQnqnd/WEB?code=UlVb687VP05bD&ref=4857164 

简介

• 目标：实现基于用户角色或会员等级的安全数据权限隔离与内容可见性控制。
• 适用场景：定向内容分发、多级会员访问控制、企业内部文档路由等。
• 核心逻辑：
  • 客户端动态条件过滤（前端隔离）：在前端页面中，利用组件的“过滤条件”功能，根据当前登录用户的属性动态筛选列表数据（例如 公告 表）。适用于非敏感级的差异化内容展示。
  • 服务端权限管理（底层阻断）：利用 Zion 自带的权限管理设置，在关系型数据库底层直接拦截查询请求。适用于保护敏感数据（例如 文件 表），防止未授权角色获取任何数据。

实现步骤

数据存储

数据模型

为了实现此系统，我们需要使用三个数据表：帐户 表（系统默认生成并进行扩展）、文件 表（用于服务端权限受控）和 公告 表（用于客户端条件过滤）。

1. 帐户

系统默认生成的帐户表，用于存储用户画像和权限等级。

2. 文件

存储文件资产信息，通过 Zion 的后端底层权限管理来实现敏感数据隔离。

3. 公告

存储公告内容，依靠前端列表组件的过滤条件来限制不同等级用户的可见性。

数据准备

为了验证可见性控制的效果，请在后台后台数据库为各数据表录入以下示例数据：

1. 帐户 表数据录入

可借助实时预览的模拟登陆功能创建帐户。

• 用户 1：id = 100000000000001，角色等级 = 1（普通会员）
• 用户 2：id = 100000000000002，角色等级 = 2（高级会员）

2. 文件 表数据录入

• 记录 1：id = 1，文件名 = 文件1

3. 公告 表数据录入

• 记录 1：id = 1，标题 = 公告1，最低查看等级 = 1
• 记录 2：id = 2，标题 = 公告2，最低查看等级 = 2

UI 搭建与逻辑

页面基本搭建

在页面管理中创建一个名为 内容可见性控制 的新页面，利用组件库的视图、文本等基础组件搭建出文件列表与公告列表的卡片展示布局。

方法一：客户端动态过滤（公告列表组件配置）

针对 公告 表，我们将通过在前端配置列表组件的过滤条件，基于当前登录用户的 角色等级 属性进行动态筛选。

1. 在左侧的大纲树中选中 列表 公告 组件。

2. 切换到右侧面板的 数据 选项卡，将 数据源 配置为 公告。

3. 点击 数据筛选 选项右侧的 + 加号图标，添加条件分支过滤（数据筛选 1）：

   • 条件：选择 当前用户/角色等级 -> 非空。
   • 过滤：配置具体过滤规则为 最低查看等级 -> 小于等于 -> 当前用户/角色等级。

   

4. 展开下方的兜底 Default 条件分支（即当用户未登录，当前用户信息不满足上述“非空”条件时的过滤规则）：

   • 过滤：点击添加按钮，设置字段 id -> 等于 -> 0（通过绑定任意不存在的虚拟 ID），从而确保在未登录状态下，前端主动隔离并过滤掉所有公告记录。

   

方法二: 服务端权限配置（底层的角色访问控制与 RLS 行级控制）

此方法在数据库级别对数据进行保护，能够完全阻止未授权的用户通过网络请求获取到数据。

1. 点击顶部导航栏的 设置 按钮，在左侧项目设置菜单中选择 权限管理。
2. 在弹出窗口左侧的 角色 列表中，选中 游客（代表未登录的匿名用户）。
   • 在数据模型选项卡下，选择 文件 表。将 文件 表的 查询 权限切换为 关闭 状态。保持其他添加、修改、删除及总数权限一并关闭，以达到完全隔离的目的。
   • 同样地，在 游客 角色下，选中 公告 表，将其 查询 权限也切换为 关闭 状态，确保未登录用户无法直接调取公告原始数据。

3. 接下来选中 已登录用户 角色。
   • 在数据模型选项卡下选择 文件 表，开启 查询 权限。
   • 在下方找到 行级权限控制 (RLS)，点击右侧的 配置 按钮。
   • 在条件设置弹窗中，点击 + 条件，配置过滤规则为：当前用户/角色等级 -> 大于等于 -> 2。确保只有等级大于等于 2 的已登录用户才可以查询该表。

文件列表组件配置

1. 在左侧的 大纲树 中选中 列表 文件 组件。
2. 切换到右侧面板的 数据 选项卡。
3. 将 数据源（数据表）配置为 文件。
4. 请求类型 保持为默认的 查询。
5. 数据筛选栏中，默认 取消过滤（即不设置任何前端过滤条件，默认返回全量数据）。

验证

为了验证上述两种内容可见性控制方法，我们可以利用 Zion 预览控制栏自带的 用户模拟 功能进行切换测试。

Step 1: 测试匿名用户（游客状态）

1. 点击 实时预览
2. 在预览页面的底部控制栏中，找到“模拟登陆”功能。
3. 确保当前状态为登出状态。
4. 预期结果：页面整体呈现空白，文件列表和公告列表均未展示任何数据记录。

Step 2: 测试普通会员（角色等级 = 1）

1. 切换选择 ID 为 100000000000001 且 角色等级 为 1 的用户。
2. 预期结果：
   • 文件列表未展示任何数据记录（因为其已登录，但角色等级为 1，不满足服务端 RLS 角色等级 >= 2 的硬性约束，被后端拦截）。
   • 公告列表仅展示了 公告1（因为 公告1 的 最低查看等级 是 1，符合前端过滤条件；而 公告2 的等级要求为 2，故被前端过滤器隔离）。

Step 3: 测试高级会员（角色等级 = 2）

1. 切换选择 ID 为 100000000000002 且 角色等级 为 2 的高级用户。
2. 预期结果：
   • 文件列表成功展示了 文件1（用户的模拟等级为 2，通过了底层的 RLS 行级控制校验）。
   • 公告列表同时展示了 公告1 和 公告2（因为此时用户的模拟等级为 2，两条公告的 最低查看等级 均满足前端过滤条件）。