使用AngularJS創建SPA如何僅向經過驗證的用戶顯示模板？

我使用AngularJS和Bootstrap創建一個SPA。假設我的Web應用程序提供已認證和未認證的用戶。未經身份驗證的用戶將看到帶頂級菜單導航的小冊子站點。與我們聯繫，聯繫等鏈接。我定義了我的路線和內容，即部分交換進出主體，一切正常。使用AngularJS創建SPA如何僅向經過驗證的用戶顯示模板？

然後他登錄並進行身份驗證。現在我想讓他看到左側導航欄。菜單和內容在右側。只有右側的內容被換入和換出。因此，有兩個頁面模板（1）手冊網站模板 - 頂部菜單和（2）安全網站模板 - 側面+頂部的菜單。

用Angular做這件事最有效的方法是什麼？我是否使用ng-include指令加載每個部分的相同側面菜單？例如ng-include src ='menu.html'？

這將是很好，如果有某種方式來指定兩個'主'頁面模板！

來源

2013-02-04 Click Ahead

根據您的需要，您可以使用CSS和ngSwitch的組合來做一些非常漂亮的事情。這裏有一個簡單的例子：

<body ng-controller="LoginController"> 
    <div ng-switch="currentUser.loggedIn"> 
    <div ng-switch-when="false"> 
     <div class='top'> 
     <h1>Welcome</h1> 
     <a href='about'>About</a> 
     <a href='contact'>Contact</a> 
     <a ng-click='login()'>Login</a> 
     </div> 
     <div ng-view> 
    </div> 

    <div ng-switch-when="true"> 
     <div class='side'> 
     <h2>Authenticated</h2> 
     <a href='about'>About</a> 
     <a href='contact'>Contact</a> 
     <a ng-click='logout()'>Logout</a> 
     </div> 
     <div ng-view> 
    </div> 
    </div> 
</body>

現在，你可以通過改變currentUser.loggedIn值（這是什麼login()和logout()做）兩個佈局之間切換。這裏有一個基於這個概念的例子：http://plnkr.co/edit/Ng1KGe0Qt9Lpdl2jfhNX?p=preview（點擊鏈接查看效果）。根據您的服務器端技術和堆棧（包括模板和CSS），根據用戶是否登錄或者根據用戶是否已登錄或者根據用戶是否登錄不。

來源

2013-02-04 03:03:29

嗨布蘭登，這看起來不錯，但如果我刷新頁面，我鬆開currentUser.loggedIn狀態。在用戶會話期間有什麼方法可以堅持下去嗎？ –

我的'currentUser'實現基本上是假的;一個實際服務的模擬，可能會得到某種服務器端會話支持的支持（至少爲了安全起見）。如果你不關心安全性，你可以堅持它到一個cookie或localStorage，或類似的東西。 –

例如，我使用$ resource服務從'/ getcurrentuser' URI獲取有關當前用戶的信息。然後在您需要它們的控制器中的整個應用程序中使用該服務。 – Dave

使用AngularJS創建SPA如何僅向經過驗證的用戶顯示模板？

回答

相關問題