Angular4-路由攔截Route Guard

在一個網站中,某些頁面並不希望讓使用者進入,有可能是權限不足、有可能是尚未登入、有可能是重要資料尚未填寫,那該怎麼寫呢?
 

官方文件


我們先來建立一個路由攔截器

輸入:ng g g logion

接著打開login.guard.ts來看看程式碼大致上這段語法只要最後返回的是true,就是可以進入路由,如果返回的是false即是不可進入

當然,也可以不符合規定就進行轉向到別的路由去

 


接著來實作路由攔截吧!

先是引用路由,接著在建構子中注入路由的服務,最後就是實作的程式碼了

這邊是寫當路由參數Type不是123的時候,就轉回首頁

 

接著到app.mpdule.ts中註冊服務

再來替路由加上攔截器

先是把預設路由轉到page1的頁面,接著替MyPage/:type的路由,加上剛剛建立好的[LoginGuard]路由攔截器

再來試試看網址列

先試著輸入「http://localhost:4200/MyPage/123」會發現怎麼樣都進不去,那是因為路由設定的type是網址列

而在攔截器中取得的是queryParams,是網址列的參數

因此路由要「http://localhost:4200/MyPage/123?Type=123」才進得來唷!

再試著輸入「http://localhost:4200/MyPage/123?Type=456」會發現由於Type參數不是123,所以再轉回預設路由


LINE討論群FB討論區

歡迎您的加入,讓這個社群更加美好!

聯絡方式:
FaceBook
E-Mail