I don't know there is a built-in dependency between Roles and Pages so you get roles for a page but consider setting certain roles that you need i.e Pro, Free, Monthly Membership...
For each role you may show / hide specific content, and to get all roles in your database use GetAllRoles method.
Then loop through the roles and check if the logged in user is a member or not to give him right access.
After your second comment I went through an Umbraco V8 demo in which I applied the following which I suggest for you:
Create groups A & B
Create members A & B
Create Login and Logout form
Create 3 templates Master, Login & Page
Create 3 document types Master, Login & Page
Create one parent Content i.e Home
Create three childs Contents i.e Login, A & B
Show navigation menu item A for members of group A
Show navigation menu item B for members of group B
Deny access to page A for unregistered members
Deny access to page B for unregistered members
Preview:

Code used in point 8 & 9:
@{
var isMemberofB = false;
var isMemberofA = false;
}
@{
var myUser = System.Web.Security.Membership.GetUser();
if (myUser != null)
{
<p class="ui red sub header">
<i class="user icon"></i>
you're logged in as @myUser.UserName
@{
isMemberofB = System.Web.Security.Roles.IsUserInRole(myUser.UserName, "B");
if (isMemberofB)
{
<p class="ui green sub header">
<i class="user icon"></i>
you're a member of role B
</p>
}
else
{
isMemberofA = System.Web.Security.Roles.IsUserInRole(myUser.UserName, "A");
if (isMemberofA)
{
<p class="ui green sub header">
<i class="user icon"></i>
you're a member of role A
</p>
}
}
}
@*This example shows how to use lazy loaded images, a sticky menu, and a simple text container*@
</p>
}
}
<a href="#" class="ui right floated dropdown item">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
@if (isMemberofA)
{
<div class="item">Link To Page A</div>
}
@if (isMemberofB)
{
<div class="item">Link To Page B</div>
}
<div class="divider"></div>
<div class="header">Header Item</div>
<div class="item">
<i class="dropdown icon"></i>
Sub Menu
<div class="menu">
<div class="item">Link Item</div>
<div class="item">Link Item</div>
</div>
</div>
<div class="item">Link Item</div>
</div>
</a>