Vue menu permission problem

the menu on the left has 12345. The requirement is to display the menu An according to the user"s rights. Roles can see 12345 B and only 12. Do you have any ideas for this function for the first time?

Jul.10,2021

background return permission, and permission menu list


the idea is that the menu is controlled by the background, and you display what is returned to you


the front end requests the backend interface to obtain the permission data of the currently logged-in user, and the menu component decides which menu items are displayed based on this data. The menu component displays nothing until the permission data is obtained.


in the project I do, the menu is a secondary list, and the tree data structure is
, so when the backend returns arr1= [1Mague 2]
I first cycle through the original menu data and delete the data in addition to 1Magazine 2.
this problem that needs to be paid attention to is deep replication, js delete array elements and other technical points


dynamic routing is more demanding, login to return to the background, there are examples on my github. The basic idea of
is that the front-end vue.js implements dynamic menus through dynamic routing, binding the screen (generating menus according to the parameters of the screen) to users or roles.
the API of the backend is bound to the screen. The permission data is also obtained from the backend by defining the permissions of the elements of the screen controlled by the component v-segment.
API permission in the background, which is handled by intercepting (spring security with AOP via the role addition method in session

Menu