受限管理面板的 ui-router 结构

Question

我正在使用 AngularJs 和 ui-router 构建一个应用程序。这是一个具有这种结构的管理面板：

• 未通过身份验证
• 已通过身份验证
  • 管理面板
  • 客户端面板

对于每个经过身份验证的状态，应用程序需要加载不同的内容并提供对不同信息的访问权限，例如：

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

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

这是我目前的结构：

-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 是否被允许（我有一个小程序的概念，例如 aplet “client”、“server”）。这存储在本地存储中，用户可以通过例如访问错误的 url。在浏览器中输入它们。如果不允许，则有一个“禁止”页面或根据您的需要重定向到登录。

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

如果您不想加载所有模板，则可以动态确定所需的捆绑包，例如“客户端”包或“管理员”包并加载它。