用於受限管理面板的UI路由器結構

Question

Im使用AngularJs和UI路由器構建應用程序。這是一個管理面板採用這種結構：

• 沒有通過認證
• 驗證的
  • 管理員控制檯
  • 客戶端面板

對於每個認證的狀態，應用程序需要加載不同的內容並訪問不同的信息，例如：

• 管理：可以看到一個列表與所有客戶，產品等...
• 客戶端：只能看到他的產品，門票等......

當用戶登錄我檢查他是管理員還是客戶端，然後用lazyload加載他需要的模塊。例如，客戶端不需要該模塊來顯示所有客戶端的列表。

這是結構我到目前爲止：

-index.html -> view:main 
    --login.html 
    --error.html 
    -app.html -> view:app 
     --restricted.html 
     --notFound.html 
     -app_adm -> view:app-adm -> lazyload admModule.js 
      --home_adm.html 
      --listClient.html 
      --listProducts.html 
      --listFinancial.html 
      etc...html 
     -app_cli -> view:app-cli -> lazyload cliModule.js 
      --home_cli.html 
      --userData.html 
      --products.html 
      --tickets.html 
      etc...html 

的index.html

<div ui-view="main"></div> 

app.html

<nav> 
    [..content here..] 
</nav> 
<div ui-view="app"></div> 
<footer> 
    [..content here..] 
</footer> 

app_adm.html

<div ui-view="app-adm"></div> 

app_cli.html

<div ui-view="app-cli"></div> 

感覺就像使用這些2個額外的app（ADM和CLI）是不完全正確，但是到現在爲止它是唯一我發現載入的文件只在我需要的地方。

有沒有更好的方法來改善這種結構？

---

注：我試圖設置狀態app-adm和app-cli是一個狀態，而不templateUrl並使用相同的視圖狀態app，但它並沒有奏效。

Answer 1

我擁有相同的應用程序結構，我所做的只是將所有模板完全捆綁在一個包中。 gulp。然後我動態檢查是否允許用戶訪問url（我有一個小程序的概念，例如apllet「client」，「server」）。這存儲在本地存儲器中，並且用戶無論如何都可以通過例如在瀏覽器中輸入它們。如果不允許，那麼根據您的需要，有一個「禁止」頁面或重定向登錄。

當然，從安全的角度來看，最重要的部分是所有相應的API調用都受到保護，因此您永遠不會相信UI的安全性。

如果您不想加載所有模板，那麼您可以動態地確定您需要的軟件包，例如， 「客戶端」軟件包或「管理員」軟件包並加載它。