我们在进行页面跳转时,很多情况下都得考虑登录状态问题,比如进入个人信息页面,下单交易页面等等。在这些场景下,通常在页面跳转前,会先判断下用户是否已经登录,若已登录,则跳转到相应的目标页面,若没有登录,则先跳转到登录页面,然后等着获取登录状态,若登录页面关闭时,能获取到已登录,则继续跳转到目标页,若用户取消了登录,则终止后面的行为。这样的处理通常会存在一些问题,例如很多页面都与登录状态相关,这样需要在大量的入口处增加登录逻辑判断。即使封装成一个方法,也需要关心是否登录成功,增加了逻辑的复杂性,而且登录页面先关闭,再打开新页面,页面切换动画也很不协调。

那么我们有没有一种更好的方案来处理登录鉴权问题呢?首先我们先梳理一下我们想要的效果,我们的目的是要跳转到相应的目标页,目标页是否需要先登录,我们是不太愿意关注的,最好是内部自己处理掉,,若没有登录,就先进行登录,登录成功后,继续后面的行为,外面使用的地方尽量做到无感知。总结一下就是进行页面跳转时,内部先判断一下状态,然后再进行后续的行为,而这恰好是Navigation拦截器的功能。

Navigation拦截器的介绍与使用

NavPathStack提供了setInterception方法,用于设置Navigation页面跳转拦截回调。该方法需要传一个NavigationInterception对象,该对象包含三个回调函数willShow,didShow和modeChange,我们在willShow页面即将显示时,进行拦截处理。先判断是否登录,没有登录,就重定向到登录页面,若已登录,则继续后续行为,不做拦截。示例如下

@Entry
@ComponentV2
struct Index {
  nav: NavPathStack = new NavPathStack()
  isLogin: boolean = false

  aboutToAppear(): void {
    this.nav.setInterception({
      willShow: (from: NavDestinationContext | NavBar, to: NavDestinationContext | NavBar,
        operation: NavigationOperation, isAnimated: boolean) => {
        if (typeof to === 'object') {
          if (isLogin) {
            AppRouter.popPage()
            AppRouter.jumpPage('login', undefined)
          }
        }
      }
    })
  }

  build() {
    Navigation(this.nav)
    .hideToolBar(true)
    .hideTitleBar(true)
    .height('100%')
    .width('100%')
  }
}

拦截器细节优化

如何判断是否需要进行拦截

在拦截器中,虽然我们可以进行拦截重定向跳转,但需要考虑的一个问题是什么情况下进行拦截,也就是哪些页面跳转时需要先判断下登录状态。首先想到的是弄一个数组,所有需要登录校验的页面都放到这个数组中。页面跳转时,我们只需要判断下目标页是否在数组中,就可以知道是否需要进行拦截校验登录了。其实思想是对的,只是我们有更简单的实现方式。在系统路由表中,有一个data字段,可以在这个字段中增加一个字段,是否需要登录,在拦截器中先获取目标页中这个参数,只要所有需要登录的页面,都添加了这个字段就可以了。我们以用户信息页为例,配置如下

{
  "routerMap": [
    {
      "name": "login",
      "pageSourceFile": "src/main/ets/pages/login/LoginPage.ets",
      "buildFunction": "loginBuilder"
    },
    {
      "name": "user_info",
      "pageSourceFile": "src/main/ets/pages/user/UserInfoPage.ets",
      "buildFunction": "userInfoBuilder",
      "data": {
        "needLogin": "1"
      }
    }
  ]
}

拦截器中获取该字段的方式如下

this.nav.setInterception({
  willShow: (from: NavDestinationContext | NavBar, to: NavDestinationContext | NavBar,
    operation: NavigationOperation, isAnimated: boolean) => {
    if (typeof to === 'object') {
      const data = (to as NavDestinationContext).getConfigInRouteMap()?.data
      if (data !== undefined && (data as object)['needLogin'] === '1' && !AppConstant.hasLogin) {
        AppRouter.popPage()
        AppRouter.jumpPage(Pages.login, undefined)
      }
    }
  }
})

登录成功后如何获取目标页和页面参数

登录成功后,我们如何知道要跳转到哪个目标页,以及跳转到目标页时所需要的参数呢?我们在跳转到登录页时可以增加2个参数targetPage和targetParam,分别表示要处理的目标页以及相应的参数,若targetPage的值为undefined,则说明登录成功后没有后续操作,若有值,则跳转到这个页面并把相应的参数传过去。在拦截器中,可以通过to.pathInfo.name获取到目标页的名称name以及通过to.pathInfo.param获取到目标页所需要的参数,并把它们赋值给登录页面的targetPage和targetParam就行了。

我们可以发现使用拦截器这种方式,完全符合我们最初的设想,外部调用时不用考虑是否要校验登录状态,由拦截器内部自己处理。登录后也是直接跳转到目标也,没有页面关闭效果。而且是否需要判断登录,只需配置一个字段就行了,非常方便。


龙儿筝
1 声望2 粉丝