【HarmonyOS】HMRouter使用详解(四)路由拦截

简介: 可以对指定或全局路由跳转时添加拦截器,作用是可以实现在页面切换前做判断是否有进入当前页面的权限。这篇文章将实现登录的全局路由拦截样式。

路由拦截器


可以对指定或全局路由跳转时添加拦截器,作用是可以实现在页面切换前做判断是否有进入当前页面的权限。这篇文章将实现登录的全局路由拦截样式。

新建拦截器类


通过继承IHMInterceptor接口实现生命周期接口的方法重写。 通过添加@HMInterceptor装饰器,来定义拦截器类的名称,然后在页面中使用

IHMInterceptor接口

包含一个handle方法,接口拦截时,会执行当前方法。

export interface IHMInterceptor {
   
    handle(info: HMInterceptorInfo): HMInterceptorAction;
}

HMInterceptorInfo参数

拦截器获取到的数据对象。

export interface HMInterceptorInfo {
   
    srcName: string;
    targetName: string;
    isSrc?: boolean;
    type: HMActionType;
    routerPathInfo: HMRouterPathInfo;
    routerPathCallback?: HMRouterPathCallback;
    context: UIContext;
}
  • srcName:发起页面名称。
  • targetName:目标页面名称。
  • isSrc:是否是发起页面。
  • type:路由跳转类型,push,replace,pop。
  • routerPathInfo:路由跳转信息,HMRouterPathInfo。
  • routerPathCallback:路由跳转回调,HMRouterPathCallback。
  • context:UIContext,可以用来对UI界面进行操作。

HMInterceptorAction枚举值

方法的返回值,表示下一个拦截器的动作

  • DO_NEXT:继续执行下一个拦截器。
  • DO_REJECT:停止执行下一个拦截器,并且不执行路由跳转动画,不执行路由栈操作。
  • DO_TRANSITION:跳过后续拦截器,直接执行路由转场动画,执行路由栈操作。

@HMInterceptor装饰器

需要标记在继承了IHMInterceptor接口的对象上,声明此对象为一个拦截器。
在路由栈发生变化前,转场动画发生前进行回调。

  • interceptorName:拦截器名称,必填。
  • priority:拦截器优先级,数字越大优先级越高,非必填,默认为9。按照优先级顺序执行,不区分自定义或者全局拦截器,优先级相同时先执行@HMRouter中定义的自定义拦截器。当优先级一致时,先执行srcPage>targetPage>global。
  • global: 是否为全局拦截器,当配置为true时,所有跳转均过此拦截器;默认为false,当为false时需要配置在@HMRouter的interceptors中才生效。

登录界面实现全局页面跳转拦截器


LoginModel

登录用的类,这里也当作是用户类来使用了。

@Observed
export class LoginModel {
   
  Name: string = "";
  Password: string = "";

  constructor(name: string, password: string) {
   
    this.Name = name;
    this.Password = password;
  }
}

User

定义一个全局类用来实现用户的登录操作,这里没有封装后续获取用户信息的方法。

import {
    LoginModel } from "../Models/LoginModel";

export class User {
   
  private static LoginUser?: LoginModel

  /**
   * 登录
   * @param username
   * @param password
   * @returns
   */
  public static Login(username: string, password: string): string {
   
    if (username == undefined || username == "" || password == undefined || password == "") {
   
      return "登录失败";
    }
    User.LoginUser = new LoginModel(username, password);
    return "登录成功";
  }

  /**
   *登出
   */
  public static Logout() {
   
    User.LoginUser = undefined;
  }

  /**
   * 是否登录
   * @returns
   */
  public static IsLogin(): boolean {
   
    return User.LoginUser != undefined;
  }
}

LoginPage

登录界面,实现页面跳转和携带参数跳转的操作。

import {
    HMInterceptorInfo, HMRouter, HMRouterMgr } from "@hadss/hmrouter";
import {
    User } from "../../Common/User";

@HMRouter({
    pageUrl: "LoginPage" })
@Component
export struct LoginPage {
   
  @State UserName: string = "";
  @State Password: string = "";
  TargetPath?: string;
  PathParam: ESObject;

  aboutToAppear(): void {
   
    let paramResult: HMInterceptorInfo = HMRouterMgr.getCurrentParam() as HMInterceptorInfo;
    if (paramResult == undefined) {
   
      return;
    }
    this.TargetPath = paramResult.targetName;
    this.PathParam = paramResult.routerPathInfo.param;
  }

  build() {
   
    Column() {
   
      Row() {
   
        Text("账户:")
          .fontSize(16)
          .margin({
    left: 10, right: 10 })
        TextInput({
    text: this.UserName, placeholder: "请输入账户" })
          .layoutWeight(1)
          .margin({
    right: 10 })
          .onChange((value) => {
   
            this.UserName = value
          })
      }
      .width("100%")

      Row() {
   
        Text("密码:")
          .fontSize(16)
          .margin({
    left: 10, right: 10 })
        TextInput({
    text: this.Password, placeholder: "请输入密码" })
          .layoutWeight(1)
          .margin({
    right: 10 })
          .type(InputType.Password)
          .onChange((value) => {
   
            this.Password = value
          })
      }
      .width("100%")
      .margin({
    top: 20 })

      Grid() {
   
        GridItem() {
   
          Button("注册")
            .width("100%")
            .backgroundColor("#f1f2f3")
            .fontColor("#007dfe")
            .onClick(() => {
   

            })

        }
        .width("50%")
        .padding({
    right: 10, left: 10 })

        GridItem() {
   
          Button("登录")
            .width("100%")
            .onClick(() => {
   
              let loginResult: string = User.Login(this.UserName, this.Password);
              if (loginResult === "登录成功") {
   
                HMRouterMgr.replace({
   
                  pageUrl: this.TargetPath,
                  param: this.PathParam
                })
              }
              console.info("登录结果:" + loginResult);
            })
        }
        .width("50%")
        .padding({
    right: 10, left: 10 })
      }
      .rowsTemplate("1tf 1tf")
      .margin({
    top: 10 })
      .width("100%")
      .height(60)
    }
    .width("100%")
    .height("100%")
  }
}

LoginInterceptor

登录拦截器

import {
    HMInterceptor, HMInterceptorAction, HMInterceptorInfo, HMRouterMgr, IHMInterceptor } from "@hadss/hmrouter";
import {
    User } from "../Common/User";

@HMInterceptor({
   
  priority: 9,
  interceptorName: "LoginInterceptor",
  global: true
})
export class LoginInterceptor implements IHMInterceptor {
   
  handle(info: HMInterceptorInfo): HMInterceptorAction {
   
    if (User.IsLogin()) {
   
      // 跳转下一个拦截器处理
      return HMInterceptorAction.DO_NEXT;
    } else {
   
      HMRouterMgr.push({
   
        pageUrl: 'LoginPage',
        skipAllInterceptor: true
      })
      // 拦截结束,不再执行下一个拦截器,不再执行相关转场和路由栈操作
      return HMInterceptorAction.DO_REJECT;
    }
  }
}

实现效果如下

相关文章
|
1天前
|
容器
【HarmonyOS】HMRouter使用详解(一)环境配置
在项目中使用官方推荐的Navigation时,需要在所有的页面上都添加一层NavDestination,在代码阅读上会增加多个层级,而且还要在主页面设置对应名字的跳转等问题,配置起来比较繁琐。看到大佬开发的HMRouter使用起来方便简洁,因此,写下这篇文章记录HMRouter的使用。
20 8
|
1天前
【HarmonyOS】HMRouter使用详解(二)
HMRouter中使用HMRouterMgr的静态方法push()和replace()来实现路由跳转。使用pop()方法来实现页面返回 * push :目标页面不会替换当前页,而是插入页面栈。可以使用pop实现页面的返回操作。 * replace:目标页面会替换当前页,并销毁当前页。这样可以释放当前页的资源,并且无法返回到当前页。 * pop:返回页面栈的上一个页面,skipedLayerNumber 页面返回的层级数量,默认为0,表示返回上一级,1表示跳过一级页面返回
18 8
|
1天前
|
监控
【HarmonyOS】HMRouter使用详解(三)生命周期
使用HMRouter的页面跳转时,想实现和Navigation一样的生命周期时,需要通过新建生命周期类来实现对页面对某一个生命周期的监控。
22 5
|
1天前
【HarmonyOS Next开发】:ListItemGroup使用
通过使用ListItemGroup和AlphabetIndexer两种类型组件,实现带标题分类和右侧导航栏的页面
81 61
|
2天前
|
人工智能 文字识别 算法
|
2天前
|
安全 Java 开发者
|
1天前
|
安全 数据安全/隐私保护
鸿蒙开发:一文了解软键盘相关
软键盘最主要的就是合理的进行避让,不能遮挡可输入组件,再有多个输入框的时候,需要动态的进行设置高度,这一点需要注意。
鸿蒙开发:一文了解软键盘相关
|
1天前
鸿蒙开发:一个轻盈的上拉下拉刷新组件
在和可滑动组件使用的时候,记得一定要和nestedScroll属性配合使用,用于解决滑动冲突,除此之外,还需要传递滑动组件的scroller属性,用于手势操作。
鸿蒙开发:一个轻盈的上拉下拉刷新组件
|
2天前
|
开发框架 前端开发 JavaScript
uniapp开发鸿蒙,是前端新出路吗?
相信不少前端从业者一听uniapp支持开发鸿蒙Next后非常振奋。猫林老师作为7年前端er也是非常激动,第一时间体验了下。在这里也给大家分享一下我的看法
32 17
|
1天前
|
开发者
【HarmonyOS Next开发】用户文件访问
文件所有者为登录到该终端设备的用户,包括用户私有的图片、视频、音频、文档等。 应用对用户文件的创建、访问、删除等行为,需要提前获取用户授权,或由用户操作完成。
20 10

热门文章

最新文章