Nuxt刷新页面抛出atob is not defined引用错误问题排查

• 客户端UI跳转时页面全程在浏览器环境执行，atob是浏览器原生全局API，可正常调用，因此页面渲染无异常。
• 刷新页面会触发服务端渲染（SSR）流程，你当前的环境判断逻辑存在漏洞：很多SSR项目会为了兼容第三方库注入空的window垫片，导致typeof window !== 'undefined'判断在服务端误判为真，进入包含atob调用的代码块。
• 这类模拟的window对象不会注入完整的浏览器API，且v16以下版本的Node.js全局作用域本身也没有内置atob方法，直接调用就会抛出Reference error atob is not defined错误。

方案1：将逻辑迁移至仅客户端执行的生命周期（推荐，零兼容问题） #

mounted生命周期只会在客户端hydration阶段执行，完全不会在服务端渲染流程中触发，从根源上规避服务端环境API缺失的问题，修改后代码如下：

mounted() {
  if (this.$route.query && this.$route.query.key) {
    this.formName = this.$route.query.formName
    this.isAuthorized = !!window.atob(this.$route.query.key).includes(this.formName)
    if (this.currentForm.isFormFilledUp === 1) {
      this.resetAll()
      this.termAcceptancePage = true
    }
  }
  if (!this.isAuthorized) {
    this.$router.push('/')
  }
}

方案2：保留created生命周期，补全严谨的环境判断 #

如果业务要求必须在created阶段执行相关逻辑，不要仅判断window是否存在，要直接校验目标API是否可用，同时避免服务端执行路由跳转逻辑：

created() {
  // 直接校验核心API是否存在，比单纯判断window对象更准确
  const isClient = typeof window !== 'undefined' && typeof window.atob === 'function'
  if (isClient && this.$route.query && this.$route.query.key) {
    this.formName = this.$route.query.formName
    // 明确从window对象上调用atob，避免全局作用域查找失败
    this.isAuthorized = !!window.atob(this.$route.query.key).includes(this.formName)
    if (this.currentForm.isFormFilledUp === 1) {
      this.resetAll()
      this.termAcceptancePage = true
    }
  }
  if (!this.isAuthorized && isClient) {
    this.$router.push('/')
  }
}

补充说明：如果确实需要在服务端执行base64解码逻辑，低版本Node.js请使用原生Buffer.from(str, 'base64').toString()实现，不要依赖浏览器端的atobAPI。注意服务端执行鉴权逻辑需要额外做安全校验，避免逻辑被绕过。

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