Nuxt3+Firebase Auth添加邮箱验证检查后出现404路由匹配错误

问题根源 #

你遇到的404错误和添加邮箱验证逻辑无关，核心原因是邮箱地址中的@属于URL特殊字符，直接拼在路由路径里会导致Nuxt的路由解析器无法正确匹配动态路由[email].js。之前的代码能运行属于测试场景巧合，本质上存在同样的路由匹配隐患。

修复方案 #

方案1：对邮箱地址进行URL编码 #

修改前端pages/test.vue中的请求代码，用encodeURIComponent对邮箱编码后再拼入路径：

<template>
  <div>
    <button @click="setCustomClaim()">Update custom claim</button>
    <pre>{{ user }}</pre>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'

const user = ref(null)

const setCustomClaim = async () => {
  const userStore = useUserStore()
  // 对邮箱地址进行URL编码，转义特殊字符
  const encodedEmail = encodeURIComponent(userStore.user.email)
  const response = await $fetch(
    `/api/users/updateCustomClaims/${encodedEmail}`
  )
  user.value = response
}
</script>

方案2：用查询参数传递邮箱（更推荐） #

避免在路径中传递含特殊字符的参数，改用查询参数的方式，从根源避免路由解析问题：

1. 修改前端请求逻辑：

<script setup>
import { useUserStore } from '@/stores/user'

const user = ref(null)

const setCustomClaim = async () => {
  const userStore = useUserStore()
  const response = await $fetch('/api/users/updateCustomClaims', {
    params: {
      email: userStore.user.email
    }
  })
  user.value = response
}
</script>

2. 调整Server API路由文件：将/server/api/users/updateCustomClaims/[email].js重命名为/server/api/users/updateCustomClaims.js，并修改代码从查询参数中获取邮箱：

import { auth } from '@/server/utils/firebase'

export default defineEventHandler(async (event) => {
  try {
    // 从查询参数中提取邮箱
    const { email } = getQuery(event)
    const user = await auth.getUserByEmail(email)
    if (user.emailVerified) {
      await auth.setCustomUserClaims(user.uid, { admin: true })
      return { success: true, message: '自定义声明更新成功' }
    } else {
      return { success: false, message: '用户邮箱未验证' }
    }
  } catch (error) {
    console.error('更新自定义声明出错:', error)
    return { success: false, message: error.message }
  }
})

额外优化提示 #

• 不要直接返回console.log的执行结果，建议返回结构化的JSON数据，方便前端统一处理成功/失败状态
• 可根据业务场景使用Nuxt的sendError方法返回标准HTTP错误码（比如邮箱未验证时返回403）

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