How to configure access control for pages in web-applications

In most applications, there is a need for access control, depending on the role of the user. In this lesson, we will look at an example of setting up such a control for a web application. As part of this task, you will need to:

• Define user role
• Depending on the role, control the display of navigation menu items
• Make it impossible to navigate to pages that are not accessible to a specific role

Initial preparation

Let's start with the preparatory part. For the convenience of further configuration, creating a global variable that will store information about the current user is necessary. Thus, if you need to do a check, you will not need to contact the backend every time and request information about the user. It will be enough to read the necessary data from the global variable.

It is necessary to take into account the various options by which an authorized user can get into the application:

• Login as a result of successful authorization on the Login page.
• Login as a result of registration.
• Direct login via a link to a specific page for users who are already authorized.

In each of these cases, a backend query is used that returns information about the user. In the corresponding business process, you only need to add a Set Variable block to record the global variable User_gv that you created earlier.

This block is added to the CheckAuth business process for authorized users, which is located in the Prebuilt folder in the business processes section.

To enter through the login or signup pages, the block is added to the business processes of the corresponding buttons.

Let's check the result on the start page of the application. To do this, let's add a Label that will greet the user by name and, depending on the role, will write whether he is an admin or not.

You need to set up a business process that fires when any Label is displayed (Label onShow trigger).

1. Expand User. For information about the user's name and roles.
2. In Array. To check if the given user is in the Admins group.
3. If-Else. For variability of actions depending on the results of the check.
   
4. Set Variable (String). To create a String variable with a value of "NOT " if the user is not a member of the Admins group or an empty value if it is.
5. Concat Strings (Multiple). To create a complete phrase like “Hi, Ken. You are NOT Admin”.
6. Label Update Properties. For the final display of this phrase on the page.
   

If everything is done correctly, then with any variant of entering the page, the screen will have a similar result.

Menu items visibility control

Now it's time to move on to the main part. Let's create a page intended only for Admins and add the corresponding menu item (Admin Page) to go to it. The best solution is to disable its visibility by default.

Using the Navigate block, you must select the created page in the Page parameter and find out the ID of this page.

In this example, there is only one page with restricted access, but it is better to immediately foresee the option when there can be many such pages and create a global read-only variable to store the list of pages.

Next, you need to create the business process itself (let's call it Set NavItem Visibility) to control the visibility of the navigation menu items.

1. Expand User. For information about user roles.
2. In Array. To check if the given user is in the Admins group.
3. For each loop. To run the loop for all pages specified in the global variable.
4. NavItem Update Properties. To control the visibility of an element, depending on whether the user is an admin.
   

The block of the created business process must be added before going to the home page in the business processes of the login and user registration buttons (previously, Set Variable blocks were added to them to record a variable with information about the current user).

Access control via direct link

The last thing to do is to set up a business process that is executed every time the application is launched by the “On app launch” trigger. As in the previous step, add the Set NavItems Visibility block for authenticated users.

In addition, it is necessary to provide protection against access to a closed page via a direct link:

1. In Array (Admin_pages). To check if the target page is on the list of admin-only pages.
2. If-Else. For variability of actions depending on the results of the check. If False, you can navigate to the specified page. In the case of True, an additional check for the right to access this page is required.
3. Expand User. To read user information from the global variable User_gv.
4. In Array. To check membership in the Admins group.
5. If-Else. To select actions depending on the presence of admin rights or their absence.
6. Navigate. To go to the required page or to redirect to the start page in the event that a user without appropriate rights tries to open a page intended only for admins.
   

The selected pages are now protected from unauthorized access. In the absence of rights, they are not displayed in the menu and cannot be accessed even through a direct link.

It is important to remember that access protection for certain pages does not mean automatic protection for endpoints that can be used on those pages. To do this, if necessary, in the Middleware Token Auth settings, you need to specify user groups that have access rights to the selected endpoint.