react新开窗口并携带basic auth

在React中使用基本身份验证（Basic Auth）并在新窗口中打开一个URL，可以按照以下步骤进行操作：

首先，你需要在React组件中创建一个处理点击事件的函数。这个函数将负责打开一个新窗口并添加基本身份验证头部。

const handleOpenNewWindow = () => {
  const username = 'your_username';
  const password = 'your_password';

  // 构建基本身份验证头部
  const basicAuthHeader = 'Basic ' + btoa(username + ':' + password);

  // 创建新窗口
  const newWindow = window.open('https://example.com', '_blank');

  // 在新窗口中添加基本身份验证头部
  newWindow.document.head.innerHTML += `
    <meta name="Authorization" content="${basicAuthHeader}">
  `;
};

在你的组件的返回部分，添加一个按钮或链接，用于触发handleOpenNewWindow函数。

<button onClick={handleOpenNewWindow}>Open New Window</button>

最后，确保你已在组件中导入React和btoa（用于将用户名和密码编码为Base64字符串）。

import React from 'react';
import { btoa } from 'btoa';

// 组件代码...

export default YourComponent;

请注意，由于基本身份验证需要包含敏感信息（用户名和密码），因此你应该小心在前端代码中存储和使用这些信息。最好的做法是将身份验证过程移至后端，以在服务器上进行验证。