Angular与Express.js开发中如何正确处理404异常，解决登录场景报错

• 前后端路由完全不匹配：前端getResponsable方法实际请求的地址为http://localhost:3000/inv_exerc/[传入的员工编号]，但后端注册的对应接口路径是/responsible，没有和前端请求路径做任何匹配关联，请求发出后无法找到对应的处理逻辑，直接触发404。
• 后端动态参数规则缺失：现有后端代码中读取req.params.responsible，但对应路由没有定义:responsible这个动态参数占位符，就算路径对上也无法正确拿到前端传入的员工编号做数据库查询。
• 前后端状态码逻辑不统一：当前后端不管数据库有没有查到匹配的负责人记录，都直接返回200状态码的响应，查不到的时候仅返回空值，根本不会触发前端预先写好的404错误判断分支，和“查不到就判定为助理身份”的设计逻辑完全脱节。

对应修复方案 #

后端接口调整 #

把原有固定路径接口替换为带动态参数的路由规则，同时补全查询结果的状态码返回逻辑，示例代码：

// 匹配 /inv_exerc/[参数值] 格式的GET请求
router.get("/inv_exerc/:responsible", async (req, res) => {
    try {
        const responsibleId = req.params.responsible
        const inv_exerc = await INV_EXERC.findOne({ RESPONSABLE: responsibleId })
        // 未查到匹配记录时返回404状态码
        if (!inv_exerc) {
            return res.status(404).json({ message: "无对应负责人数据" })
        }
        // 查到记录时返回200和对应数据
        res.json(inv_exerc)
    } catch (err) {
        res.status(500).json({ message: "数据库查询异常" })
    }
})

注意路由挂载规则匹配：如果后端是通过app.use("/inv_exerc", 路由实例)的方式挂载模块路由，那路由内的接口定义要写成router.get("/:responsible", ...)，避免路径重复拼接成/inv_exerc/inv_exerc/[参数值]的无效路径。

前端逻辑补全 #

现有服务层的路径拼接逻辑本身没有问题，只要后端路由匹配规则对齐，即可正常发送请求；同时可以把错误分支的逻辑和助理身份判定流程打通，示例调整：

this.Loginser.getdata(this.Form.value.DECAFFE).subscribe(res => {
  this.employee = res as Drafbies
  // 传入员工编号查询负责人数据库
  this.Loginser.getResponsable(this.employee.DECAFFE).subscribe({
    next: (res) => {
      // 成功查到负责人数据：加载管理员权限逻辑
      console.log("匹配到负责人记录，开启管理员权限")
    },
    error: (err) => {
      if (err.status === 404) {
        // 未查到负责人数据：走助理身份登录流程
        console.log("未匹配负责人记录，按助理身份登录")
        // 此处可补充调用getAgent接口匹配助理库的逻辑
      }
    }
  })
})

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