Angular路由守衛

2022-03-20 07:40:53 字數 1246 閱讀 9739

目前,任何使用者都能在任何時候導航到任何地方,對於大部分應用,這樣是存在安全問題的,某些使用者可能無權導航到目標元件,需要先登入(認證)

在顯示目標元件前,可能需要先獲取某些資料。

在離開元件前,可能要先儲存修改.需要詢問使用者:是否要放棄本次更改,而不用儲存它們?

對於上述這些場景問題,往往需要在路由配置中新增守衛,進行處理.

守衛通過返回乙個值,以控制路由器的行為:

守衛還可以告訴路由器導航到別處,這樣也會取消當前的導航。要想在守衛中這麼做,就要返回 false;

守衛可以用同步的方式返回乙個布林值,但在很多情況下,守衛無法用同步的方式給出答案.守衛可能會向使用者問乙個問題、把更改儲存到伺服器,或者獲取新資料,而這些都是非同步操作。因此,路由的守衛可以返回乙個observablepromise,並且路由器會等待這個可觀察物件被解析為true或false。

提供給路由器的可觀察物件還必須能結束,否則,導航就不會繼續.

路由器可以支援多種守衛介面:

* 用canactivate來處理導航到某路由的情況。

* 用canactivatechild來處理導航到某子路由的情況。

* 用candeactivate來處理從當前路由離開的情況.

* 用resolve在路由啟用之前獲取路由資料。

* 用canload來處理非同步導航到某特性模組的情況。

在分層路由的每個級別上,你都可以設定多個守衛,上面提到過的空路由,在這裡會可能發揮很好的作用

路由器會先按照從最深的子路由由下往上檢查的順序來檢查candeactivate() 和canactivatechild() 守衛.然後它會按照從上到下的順序檢查canactivate()守衛. 如果特性模組是非同步載入的,在載入它之前還會檢查canload()守衛. 如果任何乙個守衛返回 false,其它尚未完成的守衛會被取消,這樣整個導航就被取消.

//新增乙個auth守衛

ng generate guard auth (簡寫ng g g auth/auth)

生成的守衛會自動實現canactivate,若非同步載入模組的,還需要實現canload

在守衛裡進行安全的邏輯設定,可以用與服務結合實現

export class authguard implements canactivate{}
,

Angular 路由守衛

angular路由 可以控制頁面跳轉 可以在多檢視間切換 angular路由守衛 在進入或離開某路由時,用於判斷是否可以離開 進入某路由 return true代表可以進入當前路由 return false代表不可以進入當前路由,但可以進入自定義的路由 路由守衛只只能應用於路由項上 路由守衛可以應用...

Angular路由守衛 canActivate

作用 canactivate 控制是否允許進入路由。canactivatechild 等同 canactivate,只不過針對是所有子路由。關鍵 建立路由守衛 import from angular core import from angular router injectable export ...

angular4 0 路由守衛詳解

在企業應用中許可權 複雜頁多路由資料處理 進入與離開路由資料處理這些是非常常見的需求。其實angular路由守衛屬性可以幫我們做更多有意義的事,而且非常簡單。angular 的route路由引數中除了熟悉的path component外,還包括四種是否允許路由啟用與離開的屬性。這裡我們只講canac...