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

问题描述

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

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

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

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

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

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

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

  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>
  

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

  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?

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

  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.

  推荐答案

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

  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.

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

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