Menu Views and Permissions - angularjs

Question

I am building an app, in my app i am want to have a page for an admin to manage user menu permissions. What this means is that supposing i have the following menus:
Products
-Add
-Edit
-View
-Delete
And
Users
-Add
-Edit
-View
-Delete
Now i want User A to be only able to see and go to:
Products:
-View
And
Users:
-View
The rest of the menu items will be invisible and inaccessible to User A.
What i have set out to do is to create tables for this in my database:
menu_groups
-id
-name
-description
menu_items
-id
-menu_group_id
-name
-state
-description
Menu groups table will hold all top-level menu items, in this case: products and users.
Menu items table will hold sub menu items: eg. Add, Edit, View, Delete
Now when the app loads i plan on checking user permissions then loading these menu items from the database, displaying and then caching them. Obviously i will put a filter/middleware or whatever it's called on those routes on the server so no one can bypass it.
My question now is, is this the right way of doing it? In terms of security, efficiency etc. Or is there another simple way of achieving this?
I use mysql for my database, laravel-5 on my server and angularjs for client side.

Answer 1

I did something similar with my application, it's a good solution. When a user tries to access a forbidden section on my website, laravel returns a 401 error which I catch automatically in my angular application by an interceptor.
$httpProvider.interceptors.push(function() {
return {
'responseError': function(rejection) {
if(rejection.status === 401) {
//Redirect to login, show error etc.
}
};
});