Question

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

未经过身份验证
验证的
- 管理员面板
- 客户端面板

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

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

当用户登录时，我检查他是管理员还是客户端，然后使用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>

感觉就像使用那些额外的app（adm和cli）并不完全正确，但直到现在它才是我发现的唯一加载文件的地方。

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

注意：我尝试将状态app-adm和app-cli设置为没有templateUrl的状态，并使用与状态app相同的视图，但它没有用。

Answer 1

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

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

如果您不想加载所有模板，则可以动态确定所需的软件包，例如： “client”包或“admin”捆绑并加载它。

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

1 个答案: