HarmonyOS 开发实践 —— 基于Navigation的路由拦截管理

原创

小帅聊鸿蒙

发布于 2024-11-25 14:22:42

1920

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

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

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

方案

设置并开启页面路由拦截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
  })
}