动态设置Swagger UI Bearer Token后Authorize按钮禁用问题排查

Swagger UI基于React这类前端框架实现，框架的表单状态和原生DOM是分离的：

• 直接修改DOM元素的value属性，只会更新DOM显示，但不会同步到框架内部的状态管理系统，而授权按钮的禁用/启用逻辑依赖的是框架内部状态的校验结果，不是原生DOM的value值。
• 你触发的原生事件（change/keydown等）没有满足框架合成事件的监听条件，比如缺少bubbles: true这类关键配置，导致框架没捕获到输入变化的信号。
• 可能模态框还没完全渲染完成就执行了输入框赋值操作，此时框架的事件监听器还没绑定到输入框上。

方法1：正确触发框架能捕获的输入事件 #

修改事件触发逻辑，使用带bubbles和cancelable属性的InputEvent，同时先聚焦输入框模拟真实操作：

window.addEventListener('load', function() {
    // 触发授权模态框
    const authorizeButton = document.getElementsByClassName('authorize')[0];
    authorizeButton.click();

    // 等待模态框渲染完成，延迟时间可根据页面实际情况调整
    setTimeout(() => {
        // 获取Bearer Token输入框
        const tokenInput = document.querySelectorAll('[aria-label="auth-bearer-value"]')[0];
        if (!tokenInput) return;

        tokenInput.focus();
        tokenInput.value = 'abcd';
        // 触发框架能识别的input事件
        tokenInput.dispatchEvent(new InputEvent('input', {
            bubbles: true,
            cancelable: true,
            data: 'abcd'
        }));

        // 尝试点击授权按钮
        const modalAuthorizeBtn = document.querySelector('.modal-actions .btn.authorize');
        if (modalAuthorizeBtn && !modalAuthorizeBtn.disabled) {
            modalAuthorizeBtn.click();
        }
    }, 500);
});

方法2：模拟真实的逐个字符输入 #

这种方式完全贴近手动操作，框架几乎肯定能捕获到输入信号：

window.addEventListener('load', function() {
    const authorizeButton = document.getElementsByClassName('authorize')[0];
    authorizeButton.click();

    setTimeout(() => {
        const tokenInput = document.querySelectorAll('[aria-label="auth-bearer-value"]')[0];
        if (!tokenInput) return;

        tokenInput.focus();
        tokenInput.value = '';
        const token = 'abcd';
        
        // 逐个字符输入，模拟用户打字过程
        for (let i = 0; i < token.length; i++) {
            setTimeout(() => {
                tokenInput.value += token[i];
                tokenInput.dispatchEvent(new InputEvent('input', { bubbles: true }));
                
                // 最后一个字符输入完成后触发授权
                if (i === token.length - 1) {
                    setTimeout(() => {
                        const modalAuthorizeBtn = document.querySelector('.modal-actions .btn.authorize');
                        if (modalAuthorizeBtn) modalAuthorizeBtn.click();
                    }, 100);
                }
            }, i * 50);
        }
    }, 500);
});

方法3：用MutationObserver监听按钮状态 #

如果延迟时间不好控制，可以通过监听按钮的disabled属性变化，自动触发点击：

window.addEventListener('load', function() {
    const authorizeButton = document.getElementsByClassName('authorize')[0];
    authorizeButton.click();

    setTimeout(() => {
        const tokenInput = document.querySelectorAll('[aria-label="auth-bearer-value"]')[0];
        if (!tokenInput) return;

        tokenInput.focus();
        tokenInput.value = 'abcd';
        tokenInput.dispatchEvent(new InputEvent('input', { bubbles: true }));

        // 监听授权按钮的禁用状态变化
        const modalAuthorizeBtn = document.querySelector('.modal-actions .btn.authorize');
        if (!modalAuthorizeBtn) return;

        const observer = new MutationObserver((mutations) => {
            mutations.forEach(mutation => {
                if (mutation.attributeName === 'disabled' && !modalAuthorizeBtn.disabled) {
                    modalAuthorizeBtn.click();
                    observer.disconnect(); // 完成操作后停止监听
                }
            });
        });

        observer.observe(modalAuthorizeBtn, { attributes: true });
    }, 500);
});

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