Angular—路由守衛

路由守衛的用處

1. 需要用戶登錄或擁有某些權限的時候才能進入路由,就可以利用路由做一些限制
2. 用戶只有在當前路由填寫了滿足要求的信息纔可以導航到下一個路由的情況。
3. 當用戶沒有保存,就想離開當前路由的時候,就可以提醒用戶。

三種路由守衛

CanAcitivate:處理導航到某路由的情況。
CanDeactivate:處理從當前路由離開的情況。
Resolve:在跳轉到指定路由之前,提前獲取路由所需的數據。
下面看一下它們的用法:

1. CanAcitivate
(1)首先建立一個文件夾,名爲guard,然後在裏面建一個 ts 文件,名爲login.guard.ts
(2)寫一個 LoginGuard 類,讓它實現 CanActivate 接口,並實現接口裏的方法,在方法中寫上限定的條件
在這裏插入圖片描述
(3)然後需要配置一下路由,就可以了
在這裏插入圖片描述
2. CanDeactivate
(1)首先也需要建立一個 ts 文件,建立一個類UnsavedGuard,讓它實現CanDeactivate接口,不過這個接口需要一個泛型,此泛型就是當前的組件
在這裏插入圖片描述
(2)路由配置同上

3. Resolve守衛
此守衛的作用是:在進入一個路由之前,先通過該守衛獲取到路由所需的數據,獲取到數據之後,再向用戶展示頁面。之所以這樣做是因爲,有可能在加載數據的過程中有延遲,如果先向用戶展示頁面,再加載數據,給用戶帶來的體驗不好;還可以解決的一種情況就是,如果因爲某些原因獲取不到需要的數據,就可以導向錯誤頁等。
(1)先建立一個 Resolve 守衛,讓其實現Resolve接口,此接口也需要一個泛型,這個泛型就是獲取的數據類型
在這裏插入圖片描述
(2)配置路由信息
在這裏插入圖片描述
(3)頁面獲取守衛返回的數據
在這裏插入圖片描述
Resolve守衛的過程是:當進入一個路由之前,先通過該守衛獲取此路由所需的數據,獲取到之後將數據返回,最後由此路由接收守衛獲取到的數據。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章