如何从客户端保护基本身份验证获取方法密码？

Question

在我的 react fetch 方法中，我使用用户名和密码调用了基本身份验证 API，如下所示：

const username = '*******n';
const password = '***********lhW87A3mds';

componentDidMount () {
let headers = new Headers();
    headers.set('Authorization', 'Basic ' + base64.encode(username + ":" + password));
let that = this;
fetch(api.example.com , {
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      },
      credentials: "same-origin" })
      .then(function(response) { return response.json(); })
      .then(function(jsonData) {
        return JSON.stringify(jsonData);
      })
});
}

它工作正常，我也在获取数据。但我的问题是就安全问题而言，我如何保护这一点username并password防止黑客入侵；因为在客户端，这个用户名和密码对最终用户是完全可见的。查看客户端 JS 数据的下图。