如何实现用户前端编辑post时跳转至/$post-type/$post-id/edit路径

要实现用户触发post编辑操作时自动跳转至/$post-type/$post-id/edit格式路径，需要做三层配置，覆盖所有触发场景，同时避免路由被绕过：

• 编辑入口统一绑定跳转逻辑
  页面上所有编辑触发元素（包括编辑按钮、内容区双击编辑入口、右键编辑菜单选项）不要硬编码跳转地址，统一绑定动态跳转方法，提前在元素上通过自定义属性存好当前post的类型、ID参数：

  <!-- 编辑按钮示例 -->
  <button class="edit-btn" data-post-type="blog" data-post-id="123">编辑内容</button>
  

  对应跳转逻辑参考：

  // 原生JS实现，使用框架可替换为对应路由API
  const handleEditJump = (e) => {
    const target = e.currentTarget
    const postType = target.dataset.postType
    const postId = target.dataset.postId
    // 拼接标准路径后跳转
    window.location.href = `/${postType}/${postId}/edit`
  }
  // 给所有编辑入口绑定事件
  document.querySelectorAll('.edit-btn, .post-content-block').forEach(el => {
    el.addEventListener('dblclick', handleEditJump) // 双击内容触发跳转
    el.addEventListener('click', (e) => {
      if(e.target.classList.contains('edit-btn')) handleEditJump(e)
    })
  })
  

• 前端路由守卫拦截非法路径
  如果项目使用React Router、Vue Router等前端路由方案，添加全局路由守卫，拦截所有不符合路径规范的编辑页访问请求，自动重定向到标准格式路径：

  // 以Vue Router为例，其他框架逻辑一致
  router.beforeEach((to, from, next) => {
    // 识别编辑页访问请求
    if (to.path.endsWith('/edit')) {
      // 校验路径是否符合 /$post-type/$post-id/edit 规则
      const pathMatch = to.path.match(/^\/([a-z0-9-]+)\/(\d+)\/edit$/)
      if (!pathMatch) {
        // 从路由参数/query里取post类型和ID，缺省则跳回内容列表
        const postType = to.params.postType || to.query.type
        const postId = to.params.postId || to.query.id
        if (!postType || !postId) return next('/post-list')
        // 重定向到标准路径
        return next(`/${postType}/${postId}/edit`)
      }
    }
    next()
  })
  

• 后端重定向兜底
  前端逻辑可被用户通过手动修改地址栏、直接调用接口绕过，后端需要同步加拦截规则：所有编辑相关的请求，如果路径不符合规范，直接返回302响应，将Location头设置为标准格式路径，从服务端层面保证跳转逻辑生效，同时避免越权访问风险。

不要仅依赖前端跳转实现需求，没有后端兜底的话，恶意用户可以直接绕过路由规则访问未授权的编辑接口，存在安全隐患。

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