2017-07-13 79 views
0

我正在建造一個Dart/Aqueduct網絡應用程序,其中我需要能夠限制對特定路線的訪問。我在做HTTP請求時使用了Aqueducts Authorizers,但我有點擔心在Dart應用程序本身中控制用戶訪問。在Dart Webapp中保護路線

當路由到Web應用程序中不同的頁面我用飛鏢路由,即:

const Route(path: '/heroes', name: 'Heroes', component: HeroesComponent) 

這讓我在一個新的URL使用不同的模板和組件,然而,有再沒HTTP請求。一旦用戶在應用程序中,是否有辦法有效地實現用戶範圍?

我正在考慮在路由組件初始化時檢查訪問令牌,如果用戶沒有通過驗證,則不會顯示信息,但是自從dart webapps進入預編譯以來用戶仍然無法訪問該頁面內容JS包?

+0

您可以使用'@CanActivate()'註釋。這有點麻煩,因爲使用DI目前需要一個醜陋的黑客。但它不是太複雜。 如果用戶登錄,您也可以添加支票,如果不是,只需調用'router.navigate('/ login')' –

回答

0

請原諒我,如果我誤解了你的問題,或者你已經知道了大部分內容,但它聽起來像是在詢問應用程序和應用程序本身顯示的數據之間的區別。或者更一般地說,單個頁面應用程序和服務器端呈現的頁面之間的區別。

在服務器端呈現應用程序中,每個導航都會從服務器(或緩存)加載新的URL。服務器使用請求中的授權信息來獲取適當的數據,將其插入模板HTML頁面,然後返回該頁面。據客戶說,頁面顯示的數據和頁面本身是一個單一的實體。如果無法獲取數據,則返回不同的頁面,指示用戶無權訪問。

在單頁面應用程序中,您可以導航到的每個可能的「頁面」都會下載一次,並且它們都沒有任何實際的數據。相反,這些頁面是數據的容器。這些頁面的行爲向服務器發出API請求以顯示數據。

應用程序本身不受保護 - 任何人都可以導航到它或它的任何頁面。但是,數據是受保護的。如果用戶無法訪問API調用所請求的數據,則會返回帶有JSON錯誤主體的401狀態碼。

因此,必須區分客戶端和服務器端路由。您已經注意到客戶端路由實際上並未發出HTTP請求 - 這是故意的。

如果您正在從同一個應用程序提供應用程序和API,那麼爲/api之前的所有API路由加上前綴是個好主意。例如,客戶端路由是/heroes,服務器端路由是/api/heroes。這也允許移動應用程序(或任何其他非瀏覽器應用程序)使用您的API;他們不會想要HTML,因爲他們有自己的渲染行爲。

正如Günter所說,如果有一個頁面在沒有訪問API數據的情況下是無用的,請將它們踢回到登錄頁面。有兩種情況下您無法訪問API數據:您根本沒有訪問令牌,並且您的訪問令牌已過期。

當您導航到/heroes客戶端路由時發出API請求。如果您沒有訪問令牌,請將它們戳到登錄頁面。如果請求產生401,請將它們回到登錄頁面。如果你回來200,然後正常運作。

客戶端路由阻礙的一個地方是嘗試在瀏覽器中輸入客戶端路由URL(而不是以編程方式導航到該地址)。有不同的策略來支持這一點,這裏有一個:https://github.com/stablekernel/aqueduct/issues/274

+0

感謝您的出色答覆Joe。我將嘗試使用Günter的建議,並檢查401響應以獲取我的任何數據以確保用戶通過身份驗證。 –

0

請考慮創建兩個應用程序 - 一個基本上只包含登錄/註冊頁面,另一個應用您的受保護功能。

您需要在服務器上編寫代碼才能讓已認證的用戶看到受保護的應用程序。否則,您可能想要拋出403,或將訪客重定向到登錄頁面。

希望這會有所幫助。