2

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.

celsomtrindade
  • 4,501
  • 18
  • 61
  • 116
  • well its a bit tricky.. but you are doing it quite the right way... I suppose you have handle the case what client "accidentally" types in the admin url and doesn't get through and is redirected back?... other than that.. the common concerns should be put in a common folder and what ever differentiates them should be put in the respective folders.. – Minato Feb 11 '16 at 11:27
  • The folder structure I got it very well done following John Papa style guide. And the access is controlled via resolve functions to check for user role. Even if tries and can, somehow, access a admin view, the http request has token validation to check wheter the user is client or admin. The only headache is the view structure itself.. I tought there would be a simple way to do it.. Since Angular always have a very very simple way to do things.. =D – celsomtrindade Feb 11 '16 at 11:35

1 Answers1

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.

Ilya Chernomordik
  • 27,817
  • 27
  • 121
  • 207
  • Yes! The security is not my concern right now. We already have front and back-end validations for every state change and also for http requests. But I think I'm on the right way with the route structure. I'll consider your tip on the bundle idea! – celsomtrindade Feb 11 '16 at 11:38
  • You can use bundles regardless of the approach you take. They will increase performance in any case. And you can bundle everything: css, js, templates (they will essentially be js files) – Ilya Chernomordik Feb 11 '16 at 12:01
  • I dont' quite know what backend do you use so it's hard to tell, e.g. ASP.NET has a built in way of doing it. – Ilya Chernomordik Feb 11 '16 at 12:02
  • You can see e.g. this answer for bundling with gulp: http://stackoverflow.com/questions/24591854/using-gulp-to-concatenate-and-uglify-files, there are similar approaches for css. And for angular templates you have special plugin for gulp (see in my answer) – Ilya Chernomordik Feb 11 '16 at 12:04