ui-router structure for restricted admin panel

Question

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.

Answer 1

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.