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

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

Navigation攔截器的介紹與使用

NavPathStack提供了setInterception方法，用于設(shè)置Navigation頁面跳轉(zhuǎn)攔截回調(diào)。該方法需要傳一個NavigationInterception對象，該對象包含三個回調(diào)函數(shù)willShow，didShow和modeChange，我們在willShow頁面即將顯示時，進行攔截處理。先判斷是否登錄，沒有登錄，就重定向到登錄頁面，若已登錄，則繼續(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%')
  }
}

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

如何判斷是否需要進行攔截

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

{
  "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)頁和頁面參數(shù)

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

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

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

最新評論