Being new to MEAN.js, I am currently working on an application that has two roles - User and Admin. I need to display a menu based on the user role. Below is the header file I have created for both admin and user roles:
<ul class="nav navbar-nav navbar-center" data-ng-if="admin">
Admin menus
</ul>
<ul class="nav navbar-nav navbar-center" data-ng-if="user">
User menus
</ul>
The 'admin' and 'user' are controller variables. I have tried different methods to set the values for these variables.
1) I set the value for userRole in sessionStorage as follows:
$window.sessionStorage.userRole = loggedInUser.role (A role from the logged-in user)
However, any user can change this value from the browser sessionStorage, allowing them to see unauthorized menus.
2) I also attempted to set userRole into a cookie like this:
$cookieStore.put('userRole','user')
But users can change the cookie value from the browser console using:
document.cookie="key=value"
This means unauthorized users can still view menus.
3) I even tried putting userRole into $scope, but users can still change these values from the browser console.
So, I am uncertain about how to secure my header based on roles. Can anyone provide me with suggestions on this?