React Native登录页如何使用fetch调用POST API并隐藏控制台敏感信息

基础登录功能实现 #

使用fetch调用登录接口的示例代码如下：

// 登录请求触发方法，可直接绑定到登录按钮点击事件
const handleLogin = async (email, password) => {
  try {
    // 替换为你的服务端登录接口地址
    const LOGIN_API_URL = 'https://your-api-domain.com/user/login'
    const response = await fetch(LOGIN_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        // 按需添加其他自定义请求头，如App版本号、租户标识等
      },
      body: JSON.stringify({
        email,
        password
      })
    })
    const resData = await response.json()

    if (response.ok) {
      // 登录成功逻辑：存储用户token、跳转首页、缓存用户信息等
    } else {
      // 登录失败逻辑：弹窗提示接口返回的错误信息
    }
    return resData
  } catch (error) {
    // 网络异常处理逻辑
    console.error('登录请求异常', error.message)
    throw error
  }
}

避免敏感信息控制台打印的核心配置 #

• 禁用敏感参数调试打印：代码中不要添加console.log(email)、console.log(password)、console.log(loginParams)这类会直接输出邮箱、密码的调试语句，上线前排查所有调试日志。
• 错误日志过滤：异常捕获逻辑中不要打印完整请求对象，避免接口报错时连带输出敏感参数，仅打印错误码、错误描述等非敏感信息即可。
• 开发环境拦截网络请求日志：如果开启了React Native Debugger或Chrome DevTools的网络抓包，默认会自动打印所有请求参数，可添加全局fetch拦截器过滤登录接口的请求体输出：

// 仅在开发环境生效的请求拦截逻辑
if (__DEV__) {
  const originalFetch = fetch
  window.fetch = async (url, options = {}) => {
    const method = options.method || 'GET'
    // 匹配登录接口，不输出请求体
    if (url.includes('/login')) {
      console.log(`[API 请求] ${method} ${url}`)
    } else {
      // 其他接口正常打印调试信息
      console.log(`[API 请求] ${method} ${url}`, options.body)
    }
    return await originalFetch(url, options)
  }
}

• 生产环境移除所有调试日志：在babel配置中添加babel-plugin-transform-remove-console插件，打包生产版本时自动删除所有console输出，从根源避免敏感信息泄漏，配置示例如下：

// babel.config.js 配置
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: [
        // 保留error和warn日志，移除其他所有console输出
        ['transform-remove-console', { exclude: ['error', 'warn'] }]
      ]
    }
  }
}

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