title: Manage web-application permission policies with JavaScript
body: <p>I'm very curious to know what strategy usually use different developers for managing user permission policies to different parts of single-page web application.</p>
  
  <blockquote>
    <p>Just for a case: under <em>single-page web app</em> I mean web application with only one HTML (JSP, PHP, whatever) page as entry point and all the other client UI components/pages built with JavaScript).</p>
  </blockquote>
  
  <p>Are there are any best practices, approaches or frameworks for making this things more easy and straightforward?</p>
  
  <p>Let's take an example:</p>
  
  <ul>
  <li>There is a single-page web application with 2 tabs: A and B</li>
  <li>Each tab has 3 components (grids, buttons, whatever): A1, A2, A3 and B1, B2,
  B3 </li>
  <li>There are 3 user groups: U1, U2 and U3</li>
  <li>U1 has access to both tabs and all the components</li>
  <li>U2 has access to both tabs but only to components A1 and B1</li>
  <li>U3 has access only to tab A and all the components within this tab</li>
  </ul>
  
  <p>One solution which lies on the surface is to build a global JS object on page load (or with separate AJAX request) and store the user groups there. And then use conditions in the code to verify the current group and allow or restrict a specific functionality. A simplified example would look something like this:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      window.onload = function() {                
          MyApplication = {
              userGroup : 'U3' // can be also U1 or U2. This value comes from server
          };
      }
  &lt;/script&gt;   
  </code></pre>
  
  <p>And then in code we will have checks like:</p>
  
  <pre><code>if (MyApplication.userGroup == 'U1') {...}
  if (MyApplication.userGroup == 'U1' || MyApplication.userGroup == 'U2') {...}
  if (MyApplication.userGroup != 'U3') {...}
  </code></pre>
  
  <p>The example can be extended with the scenario of handling events in different ways depending on the user group.
  Let's say A1 is the button and A1OnClickHandler is its on-click-handler:</p>
  
  <pre><code>var A1OnClickHandler = function() {
      if (MyApplication.userGroup == 'U1') {
          console.log('A very private information'); 
      } else if (MyApplication.userGroup == 'U2') {
          console.log('Less private information'); 
      } else if (MyApplication.userGroup == 'U3') {
          console.log('Public information'); 
      }
  }
  </code></pre>
  
  <p>A drawback of the approach I described is the possibility to change value of MyApplication.userGroup by user on the fly after the page is rendered. Just open console and type:</p>
  
  <pre><code>MyApplication.userGroup = 'U1';
  </code></pre>
  
  <p>Bingo, user of group U3 has now rights of U1 and will be able to see private information on A1 click.
  Ok, he will still not be able to see those components which have not been rendered on page because of the initial conditions. But he will still be able to access the functionality available after these post-checks conditions.</p>
  
  <p>To be honest I was a bit surprised by not being able to find any specific information related to this issue in the web. Do I miss anything? 
  It would be interesting if anybody could share own experience of solving this kind of things. </p>
  
  <p>UPDATE: Of course all the actions that should not be done by users of groups U2 U3 will not be executed on the server because there are security checks on server as well. For example, even if a hacker will be able to show a button or a field on frontend, the action will not be executed on the backend. But what I'm looking for is not to give a chance to do this kind of things on frontend at all.</p>