In the background management system, the front and rear ends are separated, and different roles see different pages.

1. I am a background management system with separate front and rear ends using elementui framework.
2. There are different management roles in the management system, and different roles see different navigation menus.
3. On the displayed page, different roles see different data and different page-level operations. For example, administrators with high privileges can also perform some operations in addition to viewing data: add and delete, while users with low privileges can only see the data, not the action button.

as mentioned above, you are welcome to give us your advice.

data format of navigation menu 

[{
        "menuId": 1,
        "parentId": 0,
        "parentName": null,
        "name": "",
        "path": "/",
        "perms": null,
        "type": null,
        "children": [{
            "menuId": 5,
            "parentId": 1,
            "parentName": null,
            "name": "",
            "path": "/",
            "perms": null,
            "type": null,
            "children": [{
                "menuId": 11,
                "parentId": 5,
                "parentName": null,
                "name": "",
                "path": "/mechanicOrder",
                "perms": null,
                "type": null,
                "children": [{
                    "menuId": 15,
                    "parentId": 11,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": [{
                        "menuId": 22,
                        "parentId": 15,
                        "parentName": null,
                        "name": "",
                        "path": "",
                        "perms": null,
                        "type": null,
                        "children": null
                    }]
                }, {
                    "menuId": 16,
                    "parentId": 11,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }]
            }, {
                "menuId": 12,
                "parentId": 5,
                "parentName": null,
                "name": "",
                "path": "/dispatchOrder",
                "perms": null,
                "type": null,
                "children": [{
                    "menuId": 17,
                    "parentId": 12,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }, {
                    "menuId": 18,
                    "parentId": 12,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }]
            }, {
                "menuId": 13,
                "parentId": 5,
                "parentName": null,
                "name": "",
                "path": "/maintainOrder",
                "perms": null,
                "type": null,
                "children": [{
                    "menuId": 19,
                    "parentId": 13,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }, {
                    "menuId": 20,
                    "parentId": 13,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }]
            }, {
                "menuId": 14,
                "parentId": 5,
                "parentName": null,
                "name": "",
                "path": "/leaveOrder",
                "perms": null,
                "type": null,
                "children": [{
                    "menuId": 21,
                    "parentId": 14,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }]
            }]
        }, {
            "menuId": 6,
            "parentId": 1,
            "parentName": null,
            "name": "",
            "path": "/",
            "perms": null,
            "type": null,
            "children": [{
                "menuId": 23,
                "parentId": 6,
                "parentName": null,
                "name": "",
                "path": "/",
                "perms": null,
                "type": null,
                "children": [{
                    "menuId": 24,
                    "parentId": 23,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }, {
                    "menuId": 25,
                    "parentId": 23,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }, {
                    "menuId": 26,
                    "parentId": 23,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }, {
                    "menuId": 27,
                    "parentId": 23,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }, {
                    "menuId": 28,
                    "parentId": 23,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }]
            }]
        }, {
            "menuId": 7,
            "parentId": 1,
            "parentName": null,
            "name": "",
            "path": "/",
            "perms": null,
            "type": null,
            "children": [{
                "menuId": 29,
                "parentId": 7,
                "parentName": null,
                "name": "",
                "path": "/equipManage",
                "perms": null,
                "type": null,
                "children": [{
                    "menuId": 30,
                    "parentId": 29,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }, {
                    "menuId": 31,
                    "parentId": 29,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }, {
                    "menuId": 32,
                    "parentId": 29,
                    "parentName": null,
                    "name": "",
                    "path": "",
                    "perms": null,
                    "type": null,
                    "children": null
                }]
            }, {
                "menuId": 33,
                "parentId": 7,
                "parentName": null,
                "name": "",
                "path": "/equipStatus",
                "perms": null,
                "type": null,
                "children": null
            }]
        }, {
            "menuId": 8,
            "parentId": 1,
            "parentName": null,
            "name": "",
            "path": "/",
            "perms": null,
            "type": null,
            "children": [{
                "menuId": 35,
                "parentId": 8,
                "parentName": null,
                "name": "",
                "path": "/cargoLane",
                "perms": null,
                "type": null,
                "children": [{
                    "menuId": 36,
                    "parentId": 35,
                    "parentName": null,
                    "name": "",
                    "path": "/cargoLane",
                    "perms": null,
                    "type": null,
                    "children": [{
                        "menuId": 37,
                        "parentId": 36,
                        "parentName": null,
                        "name": "",
                        "path": "",
                        "perms": null,
                        "type": null,
                        "children": null
                    }]
                }]
            }, {
                "menuId": 38,
                "parentId": 8,
                "parentName": null,
                "name": "",
                "path": "/skin",
                "perms": null,
                "type": null,
                "children": null
            }]
        }, {
            "menuId": 9,
            "parentId": 1,
            "parentName": null,
            "name": "",
            "path": "/video",
            "perms": null,
            "type": null,
            "children": [{
                "menuId": 39,
                "parentId": 9,
                "parentName": null,
                "name": "",
                "path": "/video",
                "perms": null,
                "type": null,
                "children": [{
                    "menuId": 40,
                    "parentId": 39,
                    "parentName": null,
                    "name": "",
                    "path": "/video",
                    "perms": null,
                    "type": null,
                    "children": [{
                        "menuId": 42,
                        "parentId": 40,
                        "parentName": null,
                        "name": "",
                        "path": "",
                        "perms": null,
                        "type": null,
                        "children": null
                    }]
                }, {
                    "menuId": 41,
                    "parentId": 39,
                    "parentName": null,
                    "name": "",
                    "path": "/picture",
                    "perms": null,
                    "type": null,
                    "children": [{
                        "menuId": 43,
                        "parentId": 41,
                        "parentName": null,
                        "name": "",
                        "path": "",
                        "perms": null,
                        "type": null,
                        "children": null
                    }]
                }]
            }]
        }, {
            "menuId": 10,
            "parentId": 1,
            "parentName": null,
            "name": "",
            "path": "/stock",
            "perms": null,
            "type": null,
            "children": [{
                "menuId": 45,
                "parentId": 10,
                "parentName": null,
                "name": "",
                "path": "/stock",
                "perms": null,
                "type": null,
                "children": null
            }]
        }]
Javascript html5 vue.js vue-router
Mar.18,2022

set up two management modules, one is to manage your navigation menu, including your action buttons, that is, all the buttons of the request interface, and the other is to manage your role, set the permissions management button, and open it to display all your navigation menus, and then select the node you want to authorize. When the user logs in, it gets all the nodes of the current role from the backend. Then write a global public method to verify whether the node of the current button exists in the role's node array. If the node returns true, or false, verifies whether the requested interface exists in the node









node judges

the backend returns the navigation menu and permission field according to the logged-in role, and the front end directly renders the navigation menu. Determine whether there is a permission field to display the button

if you can simply see it, you can hide it according to the permission field returned by login. If you are more rigorous, you can hide the display according to the permission field and determine the permission during the operation (prevent F12). What is more secure is that the backend also controls the permission operation

Button processing: just make sure that the button or any element on the page has a unique key, naming convention, "moudle_action_other
, and then use the instruction to process it. Idea: the menu data (including buttons) returned in the background should be a tree structure, which is converted into an one-dimensional array using Map,: ['user.list','user.detail','user.list.add.btn',.]
and then the logic of processing in the instruction is very simple. 

  
 I am also writing this permission requirement. You can refer to the vue-element-admin project. Has the landlord solved this permission problem now?

Previous: Div has a circle of borders that can't be removed.

Next: How does forge extract components by specialty?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e3fa96-4357e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e3fa96-4357e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?