如何在UI5中覆写路由逻辑，无权限时直接跳转至主页避免无权限页面闪现

安全阿岳

2026-9-23

问题根因

最初使用的attachRoutePatternMatched事件触发时，目标视图已经完成加载渲染，因此必然会先展示无权限视图再跳转。
切换为attachBeforeRouteMatched后仍出现闪现，是因为你的权限校验是异步逻辑，UI5默认不会等待异步执行完成就会继续走路由渲染流程，等你拿到权限校验结果时，视图已经开始渲染。

解决方案

方案1：beforeRouteMatched事件手动拦截（兼容旧版本UI5）

在事件触发后先阻止原有路由流程执行，等权限校验完成后再决定是否放行：

router.attachBeforeRouteMatched(async (event) => {
    // 立即阻止默认路由流程
    event.preventDefault();
    const targetRouteName = event.getParameter("name");
    const routeParams = event.getParameter("arguments");
    
    const isPermitted = await this.checkUserPermission(targetRouteName);
    if (!isPermitted) {
        MessageToast.show("Sorry, you don't have permissions.");
        router.navTo("mainView");
        return;
    }
    // 权限校验通过，手动触发原路由跳转
    router.navTo(targetRouteName, routeParams);
}, this);

方案2：使用beforeRouteEnter全局钩子（UI5 1.60+推荐）

这是UI5官方提供的路由拦截专属钩子，会在视图实例化前触发，天然支持异步逻辑，无需手动中断重放路由：

router.attachBeforeRouteEnter(async (event) => {
    const targetRoute = event.getParameter("route");
    const isPermitted = await this.checkUserPermission(targetRoute.getName());
    
    if (!isPermitted) {
        // 直接拦截路由，不会触发任何目标视图的加载逻辑
        event.preventDefault();
        MessageToast.show("Sorry, you don't have permissions.");
        router.navTo("mainView");
    }
}, this);