我們?cè)谶M(jìn)行頁(yè)面跳轉(zhuǎn)時(shí)，很多情況下都得考慮登錄狀態(tài)問(wèn)題，比如進(jìn)入個(gè)人信息頁(yè)面，下單交易頁(yè)面等等。在這些場(chǎng)景下，通常在頁(yè)面跳轉(zhuǎn)前，會(huì)先判斷下用戶是否已經(jīng)登錄，若已登錄，則跳轉(zhuǎn)到相應(yīng)的目標(biāo)頁(yè)面，若沒(méi)有登錄，則先跳轉(zhuǎn)到登錄頁(yè)面，然后等著獲取登錄狀態(tài)，若登錄頁(yè)面關(guān)閉時(shí)，能獲取到已登錄，則繼續(xù)跳轉(zhuǎn)到目標(biāo)頁(yè)，若用戶取消了登錄，則終止后面的行為。這樣的處理通常會(huì)存在一些問(wèn)題，例如很多頁(yè)面都與登錄狀態(tài)相關(guān)，這樣需要在大量的入口處增加登錄邏輯判斷。即使封裝成一個(gè)方法，也需要關(guān)心是否登錄成功，增加了邏輯的復(fù)雜性，而且登錄頁(yè)面先關(guān)閉，再打開(kāi)新頁(yè)面，頁(yè)面切換動(dòng)畫(huà)也很不協(xié)調(diào)。

那么我們有沒(méi)有一種更好的方案來(lái)處理登錄鑒權(quán)問(wèn)題呢？首先我們先梳理一下我們想要的效果，我們的目的是要跳轉(zhuǎn)到相應(yīng)的目標(biāo)頁(yè)，目標(biāo)頁(yè)是否需要先登錄，我們是不太愿意關(guān)注的，最好是內(nèi)部自己處理掉，，若沒(méi)有登錄，就先進(jìn)行登錄，登錄成功后，繼續(xù)后面的行為，外面使用的地方盡量做到無(wú)感知?？偨Y(jié)一下就是進(jìn)行頁(yè)面跳轉(zhuǎn)時(shí)，內(nèi)部先判斷一下?tīng)顟B(tài)，然后再進(jìn)行后續(xù)的行為，而這恰好是Navigation攔截器的功能。

Navigation攔截器的介紹與使用

NavPathStack提供了setInterception方法，用于設(shè)置Navigation頁(yè)面跳轉(zhuǎn)攔截回調(diào)。該方法需要傳一個(gè)NavigationInterception對(duì)象，該對(duì)象包含三個(gè)回調(diào)函數(shù)willShow，didShow和modeChange，我們?cè)趙illShow頁(yè)面即將顯示時(shí)，進(jìn)行攔截處理。先判斷是否登錄，沒(méi)有登錄，就重定向到登錄頁(yè)面，若已登錄，則繼續(xù)后續(xù)行為，不做攔截。示例如下

@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%')
  }
}

攔截器細(xì)節(jié)優(yōu)化

如何判斷是否需要進(jìn)行攔截

在攔截器中，雖然我們可以進(jìn)行攔截重定向跳轉(zhuǎn)，但需要考慮的一個(gè)問(wèn)題是什么情況下進(jìn)行攔截，也就是哪些頁(yè)面跳轉(zhuǎn)時(shí)需要先判斷下登錄狀態(tài)。首先想到的是弄一個(gè)數(shù)組，所有需要登錄校驗(yàn)的頁(yè)面都放到這個(gè)數(shù)組中。頁(yè)面跳轉(zhuǎn)時(shí)，我們只需要判斷下目標(biāo)頁(yè)是否在數(shù)組中，就可以知道是否需要進(jìn)行攔截校驗(yàn)登錄了。其實(shí)思想是對(duì)的，只是我們有更簡(jiǎn)單的實(shí)現(xiàn)方式。在系統(tǒng)路由表中，有一個(gè)data字段，可以在這個(gè)字段中增加一個(gè)字段，是否需要登錄，在攔截器中先獲取目標(biāo)頁(yè)中這個(gè)參數(shù)，只要所有需要登錄的頁(yè)面，都添加了這個(gè)字段就可以了。我們以用戶信息頁(yè)為例，配置如下

{
  "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)
      }
    }
  }
})

登錄成功后如何獲取目標(biāo)頁(yè)和頁(yè)面參數(shù)

登錄成功后，我們?nèi)绾沃酪D(zhuǎn)到哪個(gè)目標(biāo)頁(yè)，以及跳轉(zhuǎn)到目標(biāo)頁(yè)時(shí)所需要的參數(shù)呢？我們?cè)谔D(zhuǎn)到登錄頁(yè)時(shí)可以增加2個(gè)參數(shù)targetPage和targetParam，分別表示要處理的目標(biāo)頁(yè)以及相應(yīng)的參數(shù)，若targetPage的值為undefined，則說(shuō)明登錄成功后沒(méi)有后續(xù)操作，若有值，則跳轉(zhuǎn)到這個(gè)頁(yè)面并把相應(yīng)的參數(shù)傳過(guò)去。在攔截器中，可以通過(guò)to.pathInfo.name獲取到目標(biāo)頁(yè)的名稱name以及通過(guò)to.pathInfo.param獲取到目標(biāo)頁(yè)所需要的參數(shù)，并把它們賦值給登錄頁(yè)面的targetPage和targetParam就行了。

我們可以發(fā)現(xiàn)使用攔截器這種方式，完全符合我們最初的設(shè)想，外部調(diào)用時(shí)不用考慮是否要校驗(yàn)登錄狀態(tài)，由攔截器內(nèi)部自己處理。登錄后也是直接跳轉(zhuǎn)到目標(biāo)也，沒(méi)有頁(yè)面關(guān)閉效果。而且是否需要判斷登錄，只需配置一個(gè)字段就行了，非常方便。

到此這篇關(guān)于鴻蒙Navigation攔截器實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)登錄鑒權(quán)方案的文章就介紹到這了,更多相關(guān)鴻蒙Navigation攔截器頁(yè)面跳轉(zhuǎn)登錄鑒權(quán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論