用于受限管理面板的UI路由器结构

Im使用AngularJs和UI路由器构建应用程序。这是一个管理面板采用这种结构：用于受限管理面板的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，但它并没有奏效。

来源

2016-02-11 celsomtrindade

好吧，它有点棘手..但你这样做是非常正确的方式...我想你已经处理了什么客户端“意外”在管理网址类型，并没有通过并重新导向回来？ ...除此之外，常见的问题应该放在一个共同的文件夹中，并且应该将它们分别放在相应的文件夹中。 – Minato

按照John Papa风格指南，我可以很好地完成文件夹结构。并通过解析函数来控制访问以检查用户角色。即使尝试并可以以某种方式访问管理视图，http请求也会使用令牌验证来检查用户是客户端还是管理员。唯一令人头疼的是视图结构本身..我在那里会有一个简单的方法来做到这一点..由于Angular总是有一个非常非常简单的方式来做事情.. = D – celsomtrindade

我拥有相同的应用程序结构，我所做的只是将所有模板完全捆绑在一个包中。 gulp。然后我动态检查是否允许用户访问url（我有一个小程序的概念，例如apllet“client”，“server”）。这存储在本地存储器中，并且用户无论如何都可以通过例如在浏览器中输入它们。如果不允许，那么根据您的需要，有一个“禁止”页面或重定向登录。

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

如果您不想加载所有模板，那么您可以动态地确定您需要的软件包，例如， “客户端”软件包或“管理员”软件包并加载它。

来源

2016-02-11 11:29:10

是的！现在我不担心安全问题。我们已经对每个状态更改以及http请求进行了前端和后端验证。但我认为我在路线结构上是正确的。我会考虑你的提示包的想法！ – celsomtrindade

无论采用何种方式，您都可以使用捆绑包。无论如何他们都会提高性能。你可以捆绑一切：css，js，模板（它们本质上就是js文件） –

你能举个例子吗？ – celsomtrindade

用于受限管理面板的UI路由器结构

回答

相关问题