受限管理面板的 ui-router 结构 [英] ui-router structure for restricted admin panel

问题描述

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

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

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

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

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

这是我目前的结构:

-index.html ->视图:主要--login.html--error.html-app.html ->视图:应用程序--restricted.html--notFound.html-app_adm ->视图:app-adm ->延迟加载 admModule.js--home_adm.html--listClient.html--listProducts.html--listFinancial.html等等...html-app_cli ->视图:app-cli ->懒加载 cliModule.js--home_cli.html--userData.html--products.html--tickets.html等等...html

index.html

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

app.html

[..内容在这里..]</nav><div ui-view="app"></div><页脚>[..内容在这里..]</页脚>

app_adm.html

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

app_cli.html

感觉使用这 2 个额外的 app(adm 和 cli)不太正确，但直到现在它是我发现的唯一一个只在我需要的地方加载文件的方法.

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

---

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

解决方案

我有相同的应用程序结构，我所做的只是将所有模板捆绑在一个捆绑包中，例如gulp.然后我动态检查是否允许用户访问的 url(我有小程序的概念，例如小程序客户端"、服务器").这存储在本地存储中，用户无论如何都可以访问错误的 url，例如在浏览器中输入它们.如果不允许，则根据您的需要有一个禁止"页面或重定向到登录.

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

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

Im building an app with AngularJs and ui-router. It's an admin panel with this structure:

• Not authenticated
• Authenticated
  • Admin panel
  • Client panel

For each of the authenticated states, the app needs to load different content and give access to different information, for example:

• Admin: Can see a list with all clients, products, etc...
• Client: Can see only his products, tickets, etc...

When the user log in I check if he's admin or client and then, with a lazyload, I load only the modules he needs. For example, client doesn't need the module to show the list of all clients.

This is the structure I have so far:

-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>

It feels like using those 2 extra app (adm and cli) are not quite right, but until now it's the only I found to load the files only where I need.

Is there a better way to improve this structure?

---

Note: I tried to set the state app-adm and app-cli to be a state without templateUrl and use the same view as the state app but it didn't worked.

解决方案

I have the same application structure and what I did is just bundled absolutely all templates in a bundle with e.g. gulp. Then I dynamically check if the url accessed by user is allowed (I have a notion of applet, e.g. apllet "client", "server"). This is stored in the local storage and user can access bad url's anyway by e.g. typing them in the browser. If it's not allowed, then there is a "forbidden" page or redirect to logon depending on your needs.

Of course most important part from the security point of view is that all the corresponding API calls are protected, so you can never trust on UI for security.

If you don't want to load all templates, then you can dynamically determine the bundle that you need, e.g. "client" bundle or "admin" bundle and load it.

这篇关于受限管理面板的 ui-router 结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！