【鸿蒙实战开发】基于Navigation的路由拦截管理

路由拦截是开发中常见场景,比如校验用户是否登录、路由拦截添加弹窗等。通过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); 
      } 
    } 
  } 
}

### 鸿蒙系统中 Navigation 路由拦截机制及其实现方法 鸿蒙系统的 `Navigation` 组件提供了强大的路由管理能力,其中包括路由拦截功能。这种功能允许开发者在用户导航至目标页面之前执行特定逻辑,例如验证用户的登录状态、权限检查或者显示提示框等。 #### 1. **核心概念** 路由拦截的核心在于通过 `setInterception` 或者自定义拦截器来实现对路由请求的控制。当用户尝试访问某个页面时,拦截器会先被触发,从而决定是否继续跳转或转向其他页面[^2]。 #### 2. **实现流程** ##### (1)创建拦截拦截器可以通过继承 `InterceptorExecute` 接口并重写其 `executeFunction` 方法来定制化拦截逻辑。以下是拦截器的一个典型实现: ```typescript // 定义拦截器类 export class MyPageInterceptorExecute implements InterceptorExecute { executeFunction(routerInfo: RouterInfo, param?: string): boolean { // 判断当前要跳转的目标页面名称 if (routerInfo !== undefined && routerInfo.pageName === "MyPage") { // 检查用户是否已登录 const isLoggedIn = AppStorage.get("isLoggedIn"); if (!isLoggedIn) { // 用户未登录,则跳转到登录页面 DynamticRouter.push("LoginPage", param); return true; // 返回true表示拦截成功,阻止原定跳转 } } // 对于其他页面或者已经登录的情况,放行 return false; } } ``` 此代码片段展示了如何根据目标页面名以及用户的登录状态来决定是否拦截跳转操作[^4]。 ##### (2)注册拦截器 完成拦截器编写后,需要将其注册到全局拦截器列表中以便生效: ```typescript // 注册拦截器 Interceptor.registerInterceptorPage(new MyPageInterceptorExecute()); ``` 这一步骤确保每次路由切换都会经过该拦截器的检测[^4]。 ##### (3)配置动态路由 如果项目中有多个可能需要拦截的路径,建议统一维护一份路由映射表,并结合动态路由技术灵活调整行为模式。例如,在某些特殊情况下临时启用或禁用某项拦截规则。 ```typescript const RouterInfo = { NAVIGATION_INTERCEPTOR: { pageName: 'MyPage' }, MULTI_MODAL_TRANSITION: { pageName: 'LoginPage' } }; ``` 以上代码用于定义不同页面对应的标识符,便于后续逻辑中的匹配过程更加清晰明了[^4]。 #### 3. **实际应用场景举例** - **登录校验**:如前所述,可以在用户试图打开受保护资源(如个人中心)前确认身份合法性。 - **权限审核**:针对部分高级功能模块实施细粒度授权策略,防止越权访问。 - **引导页展示**:首次启动应用时自动呈现新手指引界面而非默认首页。 #### 4. **注意事项** 为了提升用户体验,应尽量减少不必要的中断动作;同时也要注意性能开销问题——复杂的异步任务可能会延迟响应速度甚至引发卡顿现象。因此设计合理的缓存方案显得尤为重要[^3]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值