HarmonyOS 鸿蒙Next基于Navigation的路由拦截管理

HarmonyOS 鸿蒙Next基于Navigation的路由拦截管理 路由拦截是开发中常见场景，比如校验用户是否登录、路由拦截添加弹窗等。通过setInterception可以实现这些功能，该需求主要用于路由拦截前调用开发者设置的拦截回调，和拦截回调里开发者返回处理后需要跳转的页面信息，参考文档：Navigation。

场景一：判断用户是否登录。

方案：

设置并开启页面路由拦截registerInterception，通过全局变量LocalStorage判断用户当前是否登录，未登录时点击购物车会被拦截并跳转至登录页，输入用户名和密码后将LocalStorage改为true表示已登录，然后跳转至购物车。

核心代码

设置willShow页面跳转前拦截，当从首页跳转（即typeof from === "string"）时，如果此时登录状态为false（!this.storageLink）且目标页为购物车（target.pathInfo.name === 'pageTwo'），则会将跳转的目标页pop，然后跳转至登录页登录。

registerInterception() { 
  let loginIntercept:InterceptionShowCallback = (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar") => { 
    if (!this.isUseInterception) { 
      return; 
    } 
    if (typeof from === 'string') { 
      let target: NavDestinationContext = to as NavDestinationContext; 
      console.log("source page is navigation home"); 
      if (!this.storageLink && target.pathInfo.name === 'pageTwo') { 
        target.pathStack.pop(); 
        target.pathStack.pushPathByName('pageOne', null); 
      } 
    } 
  }
}

场景二：返回时弹出确认弹窗。

方案：

设置并开启页面路由拦截registerInterception，如果用户未完成预约直接返回，会进行路由拦截并弹出确认弹窗是否确认返回。

核心代码

设置willShow页面跳转前拦截，判断当从预约页返回时（source.pathInfo.name === 'appointPageTwo'），会进行路由拦截并弹出确认框是否返回首页，选择确认则clear清栈返回首页。

registerInterception() { 
  let loginIntercept: InterceptionShowCallback = (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar") => { 
    if (!this.isUseInterception) { 
      return; 
    } else { 
      //其他destination跳转destination的拦截 
      let source: NavDestinationContext = from as NavDestinationContext; 
      if (source.pathInfo.name === 'appointPageTwo') { 
        console.info("test" + source.pathInfo.name) 
        source.pathStack.pushPathByName('appointPageTwo', null, false); 
        this.dialog.open() 
      } 
    } 
  }
  this.pageInfos.setInterception({ 
    willShow: loginIntercept 
  })
}

更多关于HarmonyOS 鸿蒙Next基于Navigation的路由拦截管理的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

代码好像有问题，setInterception是已经栈改变之后的才会调用

更多关于HarmonyOS 鸿蒙Next基于Navigation的路由拦截管理的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


navigation 路由拦截参考这个Demo：

// Index.ets
@Entry
@Component
struct NavigationExample {
  pageInfos: NavPathStack = new NavPathStack();
  isUseInterception: boolean = false;


  registerInterception() {
    this.pageInfos.setInterception({
      // 页面跳转前拦截，允许操作栈，在当前跳转中生效。
      willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
        operation: NavigationOperation, animated: boolean) => {
        if (!this.isUseInterception) {
          return;
        }
        if (typeof to === "string") {
          console.log("target page is navigation home");
          return;
        }
        // 重定向目标页面，更改为pageTwo页面到pageOne页面。
        let target: NavDestinationContext = to as NavDestinationContext;
        if (target.pathInfo.name === 'pageTwo') {
          target.pathStack.pop();
          target.pathStack.pushPathByName('pageOne', null);
        }
      },
      // 页面跳转后回调，在该回调中操作栈在下一次跳转中刷新。
      didShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar",
        operation: NavigationOperation, isAnimated: boolean) => {
        if (!this.isUseInterception) {
          return;
        }
        if (typeof from === "string") {
          console.log("current transition is from navigation home");
        } else {
          console.log(`current transition is from  ${(from as NavDestinationContext).pathInfo.name}`);
        }
        if (typeof to === "string") {
          console.log("current transition to is navBar");
        } else {
          console.log(`current transition is to ${(to as NavDestinationContext).pathInfo.name}`);
        }
      },
      // Navigation单双栏显示状态发生变更时触发该回调。
      modeChange: (mode: NavigationMode) => {
        if (!this.isUseInterception) {
          return;
        }
        console.log(`current navigation mode is ${mode}`);
      }
    })
  }


  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'pageOne' }); //将name指定的NavDestination页面信息入栈
          })
        Button('use interception', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.isUseInterception = !this.isUseInterception;
            if (this.isUseInterception) {
              this.registerInterception();
            } else {
              this.pageInfos.setInterception(undefined);
            }
          })
      }
    }.title('NavIndex')
  }
}

在HarmonyOS（鸿蒙）系统中，基于Navigation的路由拦截管理主要通过其框架提供的路由机制和生命周期管理功能来实现。以下是对这一功能的简要说明：

HarmonyOS的路由系统允许应用在不同页面（或称为“Ability”）之间进行导航。为了实现路由拦截管理，开发者可以利用鸿蒙提供的路由守卫或类似机制，在路由跳转过程中进行条件判断，从而决定是否允许跳转。

具体而言，开发者可以在路由跳转前或跳转后设置拦截逻辑。例如，在跳转前检查用户权限、页面状态等条件，如果不满足则阻止跳转；在跳转后则可以进行一些页面初始化的操作或数据传递的校验。

鸿蒙系统的路由拦截管理通常与页面的生命周期管理紧密相关。开发者需要确保在合适的生命周期阶段（如页面加载前、加载后等）设置或执行拦截逻辑，以保证应用的稳定性和用户体验。

此外，鸿蒙系统还提供了一系列API和工具，帮助开发者更高效地实现路由拦截管理。这些API和工具通常包含在鸿蒙的开发文档中，开发者可以通过查阅文档来了解更多详细信息。

如果问题依旧没法解决请联系官网客服，官网地址是： https://www.itying.com/category-93-b0.html，

回到顶部