Squarespace能否对接外部JSON Rest-API并按权限控制页面访问？

你提到的两个需求都可以在Squarespace上实现，具体实现方案如下：

对接外部JSON REST API展示私有数据库数据 #

Squarespace支持页面插入自定义代码块，你可以通过前端JavaScript直接调用外部REST API拉取JSON格式数据后渲染到页面中。

注意：你需要提前在你的私有API服务端配置CORS规则，允许你的Squarespace站点域名跨域访问，否则接口请求会被浏览器拦截。

你可以在需要展示数据的页面插入HTML类型的代码块，填入如下示例代码即可实现基础的数据拉取渲染：

<!-- 自定义数据展示容器 -->
<div id="private-data-wrapper"></div>

<script>
// 替换为你自己的私有REST API接口地址
const PRIVATE_API = "https://你的私有服务地址/数据接口路径";

window.addEventListener("load", async () => {
  try {
    const response = await fetch(PRIVATE_API, {
      method: "GET",
      headers: {
        "Accept": "application/json",
        // 接口需要鉴权的话可以自行添加认证头，示例：
        // "Authorization": "Bearer 你的接口访问令牌"
      }
    });
    if (!response.ok) throw new Error("接口请求异常");
    // 直接解析JSON格式返回数据
    const dataList = await response.json();

    // 自定义渲染逻辑，可根据你的数据结构调整
    let renderHtml = `<h3>私有数据库数据列表</h3><ul>`;
    dataList.forEach(item => {
      renderHtml += `<li>条目名称：${item.name} | 条目数值：${item.value}</li>`;
    });
    renderHtml += `</ul>`;

    document.getElementById("private-data-wrapper").innerHTML = renderHtml;
  } catch (error) {
    document.getElementById("private-data-wrapper").innerHTML = `<p>数据加载失败，请稍后重试</p>`;
  }
});
</script>

按用户权限限制特定页面访问 #

你可以选择两种实现方案：

• 直接使用Squarespace自带的会员专区功能，开启后可以给不同等级的会员分配对应页面的访问权限，不需要写代码即可实现基础的权限控制
• 如果需要对接你自有系统的权限体系，可以自定义代码实现控制，示例逻辑如下：
  1. 用户在站点登录后，将用户权限标识存在浏览器localStorage中
  2. 在需要限制访问的页面头部注入权限校验代码，不符合权限要求的用户直接跳转走

权限校验示例代码如下，可以插入到页面对应的代码注入区域：

window.addEventListener("load", () => {
  // 取当前登录用户的权限标识，假设你已经在登录阶段存入localStorage
  const currentUserRole = localStorage.getItem("user_role");
  // 当前页面允许的访问权限，可根据需求调整
  const pageAllowedRole = "admin";

  if (currentUserRole !== pageAllowedRole) {
    alert("你没有权限访问当前页面");
    // 跳转到首页或者无权限提示页
    window.location.href = "/";
  }
});

安全提示：前端的页面跳转拦截可以被绕过，敏感数据的访问权限一定要在你的私有API服务端做校验，避免数据泄露。

内容的提问来源于stack exchange，提问作者COG