React - 链接不记名令牌

Question

我需要购买链接才能下载文件。 但是此请求需要持有者令牌才能访问该文件。 所以我建立了这个：

import { getUrl } from 'config/config';
import { useAuth } from 'oidc-react';
import { createRef } from 'react';

const AuthLink = ({ attachment, children }) => {
  const link = createRef();

  const { userData } = useAuth();

  const handleAction = async e => {
    const fullUrl = getUrl(attachment.path);

    if (link.current.href) return;

    const result = await fetch(fullUrl, {
      headers: {
        Authorization: `Bearer ${userData?.access_token}`,
      },
    });

    const blob = await result.blob();
    const href = window.URL.createObjectURL(blob);

    link.current.download = attachment.name;
    link.current.href = href;
    link.current.click();
  };

  return (
    <>
      <a role="button" ref={link} onClick={handleAction}>
        {children}
      </a>
    </>
  );
};

export default AuthLink;

这工作正常，但我在控制台上收到一个非常烦人的警告，我想摆脱它。

第 31:7 行：href 属性是键盘可访问的锚点所必需的。 提供一个有效的、可导航的地址作为 href 值。 如果您无法提供 href，但仍需要该元素类似于链接，请使用按钮并将其更改为适当的 styles。了解更多信息： https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/ master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid

我该怎么做才能消除错误 go？ 任何向标记添加“href”的尝试都只会扰乱逻辑，并阻止我下载文件。

Answer 1

问题的根本原因是您使用<a>元素执行双重任务，有时它用作链接，有时用作按钮。

使用真正的<button>而不是链接来触发点击处理程序。

然后更改点击处理程序，使其生成一个新链接作为 body 元素的子元素，单击它，然后在下载开始后将其删除。