如何在React.js中实现帖子发布前的审批功能

方案说明 #

1. 功能实现前提 #

审批功能必须前后端配合开发，无法仅通过前端实现。前端的所有校验、状态控制都可以被用户篡改绕过，只有后端存储的审批状态才具备可信度，避免用户绕过审核直接发布内容到首页。

2. 后端改造点 #

• 帖子表新增status枚举字段，默认值为0（待审批），可选值：0=待审批、1=已通过、2=已驳回，可按需新增reject_reason、approve_time等扩展字段
• 新增3个接口：
  • 单条帖子详情查询接口：支持按帖子ID查询全量信息
  • 待审批帖子列表查询接口：仅开放给有审批权限的账号调用
  • 审批操作接口：接收帖子ID、审批结果、驳回原因（可选），修改对应帖子的status字段
• 修改原首页帖子列表接口：仅返回status=1的已通过帖子，未通过审核的内容不会对外展示

3. 前端改造点 #

（1）帖子提交逻辑优化

你现有代码存在两个问题：setMessage放在请求外会导致请求失败也提示创建成功，提示文案单词拼写错误，优化后代码如下：

const onSubmit = (data) => {
  if (data.postText) {
    const formData = postToFormData(data, file, createTags);
    axios
      .post(`/posts`, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          accessToken: localStorage.getItem("accessToken"),
        },
      })
      .then((res) => {
        setMessage("post created successfully!");
        // 把后端返回的新建帖子ID带到审批页，方便拉取数据
        setTimeout(() => {
          history.push(`/approving?postId=${res.data.postId}`);
        }, 2000);
      })
      .catch(err => {
        setMessage("帖子创建失败，请重试");
      });
  }
};

（2）普通用户审批等待页开发

在/approving页面从路由参数中获取postId，调用后端帖子详情接口拉取数据，直接用你已有的字段渲染即可：

// react-router v5 取路由参数示例
const postId = new URLSearchParams(history.location.search).get('postId')
// 拉取帖子详情
useEffect(() => {
  if(postId) {
    axios.get(`/posts/${postId}`, {
      headers: {accessToken: localStorage.getItem("accessToken")}
    }).then(res => {
      setPostInfo(res.data)
    })
  }
}, [postId])

// 页面渲染内容
@{postInfo.fullName}
{postInfo.postTitle}
{postInfo.postText}

（3）管理员审批页开发

• 调用后端待审批列表接口拉取所有待审核内容，渲染列表
• 每条内容新增「通过」「驳回」按钮，点击时调用审批接口，操作成功后刷新列表即可：

const handleAudit = (postId, isPass, rejectReason = '') => {
  axios.post(`/posts/audit`, {
    postId,
    status: isPass ? 1 : 2,
    rejectReason
  }, {
    headers: {accessToken: localStorage.getItem("accessToken")}
  }).then(() => {
    // 刷新待审批列表
    getPendingPostList()
  })
}

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