HarmonyOS NEXT 使用Navigation路由拦截案例

本示例介绍在Navigation中如何完成路由拦截：首次登录时记录登录状态，再次登录时可以直接访问主页无需重复登录，当退出登录时，下次需重新登录。

效果图预览

使用说明

1. 点击Navigation路由拦截案例。
2. 在弹出的半模态页面中勾选"阅读并同意协议"，点击按钮"手机号码一键登录"。
3. 进入主页，点击返回上级页面按钮，重新点击Navigation路由拦截案例，即可直接进入主页，不需要重复登录。
4. 点击主页的"退出登录"按钮，退出案例，此时点击Navigation路由拦截案例需重新登录。

实现思路

1、在路由模块增加路由拦截器interceptor.ets，定义拦截容器、注册方法和公共拦截逻辑，interceptor.ets

/**
 * 定义拦截实现接口
 *
 * @param routerInfo 需要拦截的路由名
 * @param param 路由参数
 */
export interface InterceptorExecute {
executeFunction(router: RouterInfo, param?: string): boolean;
}

/**
 * 定义拦截器方法
 */
export class Interceptor {
  // 定义拦截器容器
  private static list: Array<InterceptorExecute> = [];

  /**
   * 注册拦截页面
   *
   * @param interceptorFnc 子模块传过来的自定义拦截函数
   */
  public static registerInterceptorPage(interceptorFnc: InterceptorExecute): void {
    Interceptor.list.push(interceptorFnc);
  }

  /**
   * 公共拦截器逻辑
   *
   * @param routerInfo 接收传过来的路由名
   * @param param 路由参数
   */
  public static interceptor(routerInfo: RouterInfo, param?: string): boolean {
    // 循环拦截器容器中所有的子模块自定义的拦截函数
    for (let i = 0; i < Interceptor.list.length; i++) {
      if (Interceptor.list[i].executeFunction(routerInfo, param))
        return true; // 如果子模块拦截函数返回true，即需要拦截
    }
    // 否则就放行
    return false;
  }
}

2、当点击本案例时，触发在路由模块的动态路由.push()中的interceptor的公共拦截方法（此处需动态路由完成加载后执行否则首次路由拦截失败），DynamcicsRouter.ets

// 通过获取页面栈跳转到指定页面
public static async push(routerInfo: RouterInfo, param?: string): Promise<void> {
  if (isImportSucceed) {
    // TODO：知识点：在路由模块的动态路由.push()中调用拦截方法，此处必须等待动态路由加载完成后再进行拦截，否则页面加载不成功，导致无法注册拦截的函数，出现首次点进案例时拦截失效。
    if (Interceptor.interceptor(routerInfo, param)) {
      return;
    }
}

3、子模块中定义业务具体拦截逻辑，做具体的拦截实现：通过routerInfo判断目的地为"我的页面"时判断登录状态是"未登录"，此时执行跳转到登录页并返回true给拦截容器list（告知需拦截），已登录返回false，放行。并且注册到拦截器容器list中，interceptorPage.ets。

// 子模块实现拦截接口，做具体的拦截实现
export class MyPageInterceptorExecute implements InterceptorExecute {
  executeFunction(routerInfo: RouterInfo, param?: string): boolean {
    // 通过routerInfo判断目的地为"我的页面"时判断登录状态是"未登录"，此时执行跳转到登录页并返回true给拦截容器list（告知需拦截），已登录返回false，放行。
    if (routerInfo !== undefined && routerInfo.pageName === RouterInfo.NAVIGATION_INTERCEPTOR.pageName) {
      // 如果未登录
      if (!AppStorage.get("login")) {
        // 跳转登录页
        DynamicsRouter.push(RouterInfo.MULTI_MODAL_TRANSITION, param);
        return true; // true：路由拦截
      } else {
        return false; // false：否则放行
      }
    }
    // 通过routerInfo判断目的地为"登录页面"时放行。
    if (routerInfo !== undefined && routerInfo.pageName === RouterInfo.MULTI_MODAL_TRANSITION.pageName) {
      return false;
    }
    return false; // false，路由放行
  }
}

// 拦截器注册拦截函数
Interceptor.registerInterceptorPage(new MyPageInterceptorExecute());

4、拦截器获取拦截容器list中所有注册过的子模块的拦截函数，如果子模块拦截函数返回true，即需要拦截，否则放行。

/**
 * 公共拦截器逻辑
 *
 * @param routerInfo 接收传过来的路由名
 * @param param 路由参数
 */
public static interceptor(routerInfo: RouterInfo, param?: string): boolean {
  // 循环拦截器容器中所有的子模块自定义的拦截函数
  for (let i = 0; i < Interceptor.list.length; i++) {
    if (Interceptor.list[i].executeFunction(routerInfo, param))
      return true; // 如果子模块拦截函数返回true，即需要拦截
  }
  // 否则就放行
  return false;
}

5、通过循环拦截容器list得到返回true时通知动态路由不再继续跳转, 否则返回false，通知动态路由继续执行跳转，跳转到我的页面，DynamcicsRouter.ets。

// 通过获取页面栈跳转到指定页面
public static async push(routerInfo: RouterInfo, param?: string): Promise<void> {
  if (isImportSucceed) {
    // 当返回true时执行拦截，通知动态路由不再继续跳转
    if (Interceptor.interceptor(routerInfo, param)) {
      return;
    }
    ... // 当返回false，通知动态路由继续执行跳转，跳转到我的页面
  }

6、在登录页点击：本机号码一键登录后，登陆成功，登陆状态置为true，且跳转到主页，HalfModalWindow

Button($r('app.string.multimodaltransion_phone_start_login'))
  .onClick(() => {
    if (this.isConfirmed) {
      AppStorage.set("login", true); // 登录状态置为已登录
      DynamicsRouter.pop();
      DynamicsRouter.push(RouterInfo.NAVIGATION_INTERCEPTOR); // 路由跳转
    })

7、详情页中点击：注销登录，登录状态置为false，退出登录，interceptorPage.ets

@StorageLink('login') hasLogin: boolean = true;
        
Button($r('app.string.naviagtion_interceptor_loginout'))
  .onClick(() => {
    this.hasLogin = false; // 注销登录
    DynamicsRouter.pop(); // 退出登录
  })
  .width("100%")

高性能知识点

不涉及

工程结构&模块类型

navigationinterceptor                           // har类型
|---src/main/ets/view
|   |---interceptorPage.ets                     // 视图层-主页
|---src/main/ets/model
|   |---DataModel.ets                           // 模型层-数据模块
routermodule                                    // har类型
|---src/main/ets/interceptpr
|   |---interceptor.ets                         // 模型层-拦截器方法类
|---src/main/ets/router
|   |---DynamticRouter.ets                      // 模型层-动态路由方法类

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

•  HarmonOS基础技能

• HarmonOS就业必备技能 
•  HarmonOS多媒体技术

• 鸿蒙NaPi组件进阶

• HarmonOS高级技能

• 初识HarmonOS内核 
• 实战就业级设备开发

 有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

 《鸿蒙开发基础》

• ArkTS语言
• 安装DevEco Studio
• 运用你的第一个ArkTS应用
• ArkUI声明式UI开发
• .……

 《鸿蒙开发进阶》

• Stage模型入门
• 网络管理
• 数据管理
• 电话服务
• 分布式应用开发
• 通知与窗口管理
• 多媒体技术
• 安全技能
• 任务管理
• WebGL
• 国际化开发
• 应用测试
• DFX面向未来设计
• 鸿蒙系统移植和裁剪定制
• ……

《鸿蒙进阶实战》

• ArkTS实践
• UIAbility应用
• 网络案例
• ……

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。