Angularjs 受限管理面板的ui路由器结构

我正在用AngularJs和ui路由器构建一个应用程序。这是一个具有以下结构的管理面板：

• 未经认证
• 认证
  • 管理面板
  • 客户端面板

对于每个已验证的状态，应用程序需要加载不同的内容并允许访问不同的信息，例如：

• 管理员：可以看到所有客户、产品等的列表
• 客户：只能看到他的产品、门票等

当用户登录时，我会检查他是管理员还是客户端，然后用懒散的方式，只加载他需要的模块。例如，客户端不需要模块来显示所有客户端的列表

这就是我目前的结构：

-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

app.html

[…此处的内容]
[…此处的内容]

app_adm.html

app_cli.html

感觉使用这两个额外的

应用程序
（adm和cli）并不完全正确，但直到现在，我发现只有它才能在需要的地方加载文件

有没有更好的方法来改善这种结构


注意：我试图将状态
app adm
和
app cli
设置为没有templateUrl的状态，并使用与状态
app
相同的视图，但没有起作用。
我有相同的应用程序结构，我所做的只是将所有模板捆绑在一个捆绑包中，例如。然后我动态地检查用户访问的url是否被允许（我有一个applet的概念，例如aplet“client”，“server”）。它存储在本地存储器中，用户可以通过在浏览器中键入错误的url来访问这些url。如果不允许，则会出现“禁止”页面或根据需要重定向到登录

当然，从安全性的角度来看，最重要的部分是所有相应的API调用都受到保护，所以您永远不能信任UI的安全性

如果您不想加载所有模板，则可以动态确定所需的捆绑包，例如“客户端”捆绑包或“管理员”捆绑包并加载。
这有点棘手。。但是你做的很对。。。我想你已经处理了什么客户端“意外”在管理员url中键入，但没有通过并被重定向回的情况？。。。除此之外。。共同关心的问题应该放在一个共同的文件夹中，它们之间的区别应该放在各自的文件夹中。文件夹结构我按照约翰·帕帕的风格指南做得很好。通过解析功能控制访问，以检查用户角色。即使尝试并能够以某种方式访问管理员视图，http请求也会进行令牌验证，以检查用户是客户机还是管理员。唯一让人头疼的是视图结构本身。。我认为有一个简单的方法来做这件事。。因为我总是有一个非常简单的方法做事情=染料！我现在不关心安全问题。我们已经为每个状态更改以及http请求进行了前端和后端验证。但我认为我的路线结构是正确的。我会考虑你的想法在捆绑的想法！无论采用何种方法，都可以使用bundle。在任何情况下，它们都将提高性能。你可以捆绑所有东西：css、js、模板（它们基本上是js文件）我不太清楚你使用什么后端，所以很难说，例如ASP.NET有一种内置的方式。你可以看到，例如，捆绑gulp的答案是：，css也有类似的方法。对于角度模板，你有专门的gulp插件（见我的答案）
<div ui-view="main"></div>

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

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

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