鸿蒙路由 HMRouter 配置及使用三全局拦截器使用

news2025/3/18 5:15:58

1、前期准备

简单封装一个用户首选项的工具类

import { preferences } from "@kit.ArkData";

// 用户首选项方法封装
export class Preferences {
  private myPreferences: preferences.Preferences | null = null;
  // 初始化
  init(context: Context, options: preferences.Options) {
    this.myPreferences = preferences.getPreferencesSync(context, options);
  }

  // 获取参数
  getSync(key: string, defaultValue?: string) {
    if(this.myPreferences) {
      let val = this.myPreferences.getSync(key, defaultValue);
      return val;
    }else {
      return defaultValue;
    }
  }

  // 设置参数
  putSync(key: string, value: string) {
    if(this.myPreferences) {
      this.myPreferences.putSync(key, value)
    }
  }
}

const myPreferences = new Preferences();
export { myPreferences }

在程序入口文件使用工具类

onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    
    // 初始化用户首选项工具类
    myPreferences.init(this.context, {
      name: 'myStore'
    })
    
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }

2、创建全局登录拦截器

import { HMInterceptor, HMInterceptorAction, HMInterceptorInfo, HMRouterMgr, IHMInterceptor } from '@hadss/hmrouter';
import { myPreferences } from "../utils/Preferences"

@HMInterceptor({
  priority: 9,
  interceptorName: "LoginInterceptor",
  global: true // 定义为全局拦截器
})
export class LoginInterceptor implements IHMInterceptor {
  // 路由白名单
  private WhiteList: string[] = ["LoginPage", "MainPage"]

  handle(info: HMInterceptorInfo): HMInterceptorAction {
    console.log("目标页面：" + info.targetName)
    // 如果目标地址在白名单内，则不拦截
    if(info.targetName && this.WhiteList.includes(info.targetName)) {
      console.log("白名单内，不拦截")
      return HMInterceptorAction.DO_NEXT;
    }
    // 获取用户token
    const token = myPreferences.getSync("token")
    console.log("token", token)
    const isLogin: boolean = token ? true : false;
    // 已登录 继续向下执行
    if(isLogin) {
      console.log("已登录，继续向下执行")
      return HMInterceptorAction.DO_NEXT;
    }else {
      console.log("未登录，跳转到登录页面")
      // 未登录 跳转到登录页面
      HMRouterMgr.replace({
        pageUrl: "LoginPage",
        skipAllInterceptor: true // 跳过所有拦截器
      })
      // 停止执行下一个拦截器，并且不执行路由跳转动画，不执行路由栈操作
      return HMInterceptorAction.DO_REJECT;
    }
  }
}

3、创建登录页面

import { HMRouter, HMRouterMgr } from '@hadss/hmrouter';
import { myPreferences } from '../utils/Preferences';

@HMRouter({
  pageUrl: "LoginPage",
})
@Component
export struct LoginPage {
  build() {
    Column() {
      Text("登录页面").fontSize(30).fontWeight(FontWeight.Bold)
      // 通过用户首选项添加测试数据 并跳转到首页
      Button("跳转到 - MainPage").onClick((event: ClickEvent) => {
        // 向用户首选项添加 验证字段
        myPreferences.putSync("token", "123456")
        HMRouterMgr.push({
          pageUrl: "MainPage",
        })
      })
    }
  }
}

4、首页添加测试跳转

// 测试登录拦截
      Button("测试登录拦截，跳转TwoPage").onClick((event: ClickEvent) => {
        HMRouterMgr.push({
          pageUrl: "TwoPage"
        })
      })