Harmony HMRouter Interceptor 的基本使用

1 创建Interceptor

php 复制代码
@HMInterceptor({interceptorName: 'LoginCheckInterceptor'})
export class LoginCheckInterceptor implements IHMInterceptor {
  handle(info: HMInterceptorInfo): HMInterceptorAction {
    if(info.srcName === 'PayCard') {
      if(!!AppStorage.get('isLogin')) {
        return HMInterceptorAction.DO_NEXT;
      } else {
        info.context.getPromptAction().showToast({message: LoginConstants.LOGIN_TOAST});
        HMRouterMgr.push({
          pageUrl: 'loginPage',
          skipAllInterceptor: true
        });
        return HMInterceptorAction.DO_REJECT;
      }
    } else {
      if(!!AppStorage.get('isLogin')) {
        return HMInterceptorAction.DO_NEXT;
      } else {
        info.context.getPromptAction().showToast({message: LoginConstants.LOGIN_TOAST});
        HMRouterMgr.push({
          pageUrl: 'loginPage',
          param: info.targetName,
          skipAllInterceptor: true
        });
        return HMInterceptorAction.DO_REJECT;
      }
    }
  }
}

这个是官方demo里面的一个登陆拦截Interceptor。跳转某些需要登陆页面的时候,如果没有登陆返回 HMInterceptorAction.DO_REJECT,取消这次登陆。 如果已经登陆返回HMInterceptorAction.DO_NEXT,正常跳转。

2 使用 Interceptor

less 复制代码
@HMRouter({
  pageUrl: PageConstant.PAY_DIALOG_CONTENT,
  dialog: true,
  lifecycle: 'ExitPayDialog',
  interceptors: ['LoginCheckInterceptor']
})
@Component
export struct PayDialogContent {}

在需要拦截的地方的interceptors中添加 比如

js 复制代码
interceptors: ['LoginCheckInterceptor']

LoginCheckInterceptor 是创建Interceptor的时候填写的interceptorName @HMInterceptor({interceptorName: 'LoginCheckInterceptor'})

3 Interceptor的另一种注册方式

js 复制代码
export class JumpInfoInterceptor implements IHMInterceptor {
  handle(info: HMInterceptorInfo): HMInterceptorAction {
    let connectionInfo: string = '';
    if(info.type === HMActionType.PUSH) {
      connectionInfo = 'jump to';
    } else {
      connectionInfo = 'back to';
    }

    console.log(`${info.srcName} ${connectionInfo} ${info.targetName}`);
    return HMInterceptorAction.DO_NEXT;
  }
}

JumpInfoInterceptor也是一个Interceptor,但是他并没有声明interceptorName。他可以通过这种方式注册。

css 复制代码
HMRouterMgr.registerGlobalInterceptor({
  interceptor: new JumpInfoInterceptor(),
  interceptorName: 'JumpInfo',
  priority: 5
});

4 全局 Interceptor

typescript 复制代码
@HMInterceptor({interceptorName: 'LoginStatusInterceptor', global: true})
export class LoginStatusInterceptor implements IHMInterceptor {
  handle(info: HMInterceptorInfo): HMInterceptorAction {
    console.log(`Login status is ${!!AppStorage.get('isLogin') ? 'Y' : 'N'}`);
    return HMInterceptorAction.DO_NEXT;
  }
}

HMInterceptor 只是声明了global = true; 那么所有的页面跳转都会经过这个Interceptor。

相关推荐
世人万千丶13 小时前
鸿蒙Flutter Flex多子组件权重分配
学习·flutter·华为·harmonyos·鸿蒙
拥抱太阳061617 小时前
HarmonyOS 应用开发《掌上英语》第23篇-图标与颜色系统构建可主题化视觉体系
华为·harmonyos
红烧大青虫17 小时前
HarmonyOS应用开发实战:小事记 - UIAbility 的冷启动/热启动/后台启动三种场景与 launchParam 解析
后端·华为·harmonyos·鸿蒙系统
b1305381004918 小时前
HarmonyOS应用开发实战:小事记 - 多级页面路由的 back 逻辑与参数回传模式
华为·harmonyos·鸿蒙系统
MonkeyKing19 小时前
鸿蒙ArkTS Text组件全解析:全属性详解+富文本实战
harmonyos
花开彼岸天~19 小时前
鸿蒙原生开发手记:徒步迹 - 自定义组件开发规范
后端·华为·harmonyos·鸿蒙系统
zSD55rt5a20 小时前
方差在扩散模型保护中的作用
人工智能·harmonyos
AD022720 小时前
HarmonyOS应用实战-启示散页-05-随机抽答案要避免连续重复:把算法放进服务层
harmonyos·arkts·鸿蒙开发
世人万千丶20 小时前
鸿蒙Flutter Flexible与Expanded的区别
学习·flutter·harmonyos·鸿蒙
红烧大青虫20 小时前
setInterval 倒计时实现:60s 验证码发送逻辑
后端·华为·harmonyos·鸿蒙系统