如何统一处理所有Kendo UI对象的401未授权响应？

刚好做过类似的需求！不用挨个修改每个Kendo组件（Grid、DropDownList、DataSource这些）的错误配置，Kendo提供了全局拦截的方式，能一次性搞定所有后端请求的错误处理，尤其是401未授权的刷新令牌场景。下面分几种常用方案给你讲：

方案一：重写Transport的全局错误方法 #

所有Kendo数据组件的请求都是基于transport对象的，不管你用的是ajax还是odata类型的transport，都可以重写它的error方法来统一拦截：

// 先保存原始的transport error方法（这里以ajax为例，odata的话替换成"odata"）
const originalTransportError = kendo.data.transports["ajax"].prototype.error;

// 重写error方法
kendo.data.transports["ajax"].prototype.error = function(xhr, status, error) {
    // 优先判断401状态
    if (xhr.status === 401) {
        // 这里执行你的刷新令牌逻辑，比如调用后端刷新接口
        refreshToken()
            .then(newAccessToken => {
                // 刷新成功后，更新请求头里的token
                this.options.headers["Authorization"] = `Bearer ${newAccessToken}`;
                // 重新发起原来的请求
                this.read(this.options);
            })
            .catch(() => {
                // 刷新失败，直接跳登录页
                window.location.href = "/login";
            });
    } else {
        // 其他错误类型，交给原始的error方法处理
        originalTransportError.call(this, xhr, status, error);
    }
};

提示：如果你的项目里混合使用了多种transport类型（比如同时有ajax和odata），可以分别重写对应的transport原型方法。

方案二：全局配置DataSource的错误事件 #

另一种更直接的方式是给所有kendo.data.DataSource设置全局的error回调，这样所有基于DataSource的组件都会自动继承这个处理逻辑：

// 全局覆盖DataSource的默认error处理
kendo.data.DataSource.prototype.options.error = function(e) {
    if (e.status === 401) {
        refreshToken()
            .then(newToken => {
                // 获取当前出错的DataSource实例
                const dataSource = e.sender;
                // 更新请求头
                dataSource.transport.options.headers["Authorization"] = `Bearer ${newToken}`;
                // 重新加载数据
                dataSource.read();
            })
            .catch(() => {
                window.location.href = "/login";
            });
    } else {
        // 非401错误可以自定义处理，比如弹出提示
        console.error(`请求出错：${e.errorThrown}`);
        alert(`请求失败：${e.errorThrown}`);
    }
};

注意：如果某些组件已经单独配置了error事件，这个全局配置会覆盖它。如果需要兼容，可以在全局方法里先判断是否存在自定义error回调，再调用。

方案三：拦截独立的kendo.ajax请求 #

如果你的项目里还有直接用kendo.ajax()发起的独立请求（不是通过DataSource），可以重写kendo.ajax方法来统一处理：

const originalKendoAjax = kendo.ajax;

kendo.ajax = function(options) {
    // 保存用户原来的error回调
    const originalError = options.error;

    // 替换成自定义的错误处理逻辑
    options.error = function(xhr, status, error) {
        if (xhr.status === 401) {
            refreshToken()
                .then(newToken => {
                    // 更新请求头
                    options.headers["Authorization"] = `Bearer ${newToken}`;
                    // 重新发起请求
                    originalKendoAjax(options);
                })
                .catch(() => {
                    window.location.href = "/login";
                });
        } else {
            // 如果用户原来有设置error回调，优先调用它
            if (originalError) {
                originalError.call(this, xhr, status, error);
            }
        }
    };

    // 调用原始的kendo.ajax方法
    originalKendoAjax(options);
};

关键注意事项 #

• 防止重复刷新令牌：可以设置一个全局变量（比如isRefreshingToken），在刷新开始时标记为true，结束后设为false，避免多个401请求同时触发刷新逻辑。
• 刷新接口的特殊处理：确保你的刷新令牌接口本身不会返回401，或者单独给这个接口加例外处理，否则会陷入死循环。
• SPA路由跳转：如果是单页应用，跳转登录页时记得清除本地存储的旧token和刷新令牌，避免残留信息导致问题。

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