How to realize the authority route and authority menu of background management system

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Preface "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" This article is following The last article of actual combat , This paper mainly introduces "},{"type":"text","marks":[{"type":"strong"}],"text":" How to realize the authority route and authority menu of background management system "},{"type":"text","text":". Hope through this 3 The reexamination and actual combat of articles , Can let you develop enterprise applications more easily ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The main technical points involved in this paper are as follows :"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" How to use "},{"type":"text","marks":[{"type":"strong"}],"text":" A recursive algorithm "},{"type":"text","text":" Dynamic rendering of menu with variable levels "}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" How to control menu display based on permission "}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" be based on "},{"type":"text","marks":[{"type":"strong"}],"text":"nodejs"},{"type":"text","text":" The authority service design of "}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Text "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Dynamic menu and authority routing are essential in the design of background management system , As a complex background management system , The navigation menu is often not a simple first level menu , There are always 3 level ,4 Level menu , as follows :"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d7/d7cc6fe11a7c0593f6a0de42d7163c52.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" So our first problem is to face "},{"type":"text","marks":[{"type":"strong"}],"text":" Unknown level menu "},{"type":"text","text":" The front-end solution when . The second is facing different roles , You need to show different permission menus , How do we solve these two problems , Is the first step to implement the permissions menu , Next, I will take you to realize ."}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Use recursive algorithm to dynamically render menus with indefinite levels "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" First, let's solve the first problem , Realize the rendering of the menu at different levels . The menu we use now schema as follows :"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const menuData = [\n {\n key: '/manage',\n path: '/manage',\n text: 'dooring The workbench ',\n },\n {\n key: '/manage/anazly',\n path: '/manage/anazly',\n text: ' Big data ',\n },\n {\n key: '/manage/h5',\n text: 'H5 Service center ',\n sub: [\n {\n key: '/manage/h5/config',\n path: '/manage/h5/config',\n text: 'H5 Page management ',\n },\n {\n key: '/manage/h5/tpl',\n path: '/manage/h5/tpl',\n text: ' Template library ',\n }\n ]\n },\n {\n key: '/manage/order',\n path: '/manage/order',\n text: ' Order management ',\n }\n]\n Copy code "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" We can do this by implementing a js Algorithm to traverse this data to generate dynamic menus , such as for, Recursion, etc , The author here uses recursive return to realize , About the selection of menu components , We can use "},{"type":"text","marks":[{"type":"strong"}],"text":"antd"},{"type":"text","text":" Of "},{"type":"text","marks":[{"type":"strong"}],"text":"Menu"},{"type":"text","text":", You can also use "},{"type":"text","marks":[{"type":"strong"}],"text":"element UI"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"strong"}],"text":"iView"},{"type":"text","text":" etc. , The principle is basically the same , Here the writer writes my "},{"type":"text","marks":[{"type":"strong"}],"text":"javascript"},{"type":"text","text":" Recursive version :"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const { SubMenu } = Menu;\nconst createMenu = (menu = []) => {\n return menu.map(item => {\n if(item.sub) {\n return \n { createMenu(item.sub) }\n \n }else {\n return \n { item.text }\n \n }\n })\n }\n Copy code "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In this way, we can render any level of menu , stay "},{"type":"text","marks":[{"type":"strong"}],"text":"H5-Dooring"},{"type":"text","text":" The effect in the background is as follows :"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/97/97dc232a2562c7655a2d444bb852f292.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" If there is no permission requirement , You can directly use the above scheme to achieve any dynamic hierarchical menu . Next, let's implement a dynamic menu with permissions ."}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" Control menu display based on permissions "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" In the above implementation, we have implemented the dynamic hierarchical menu , For systems with authority management functions , We need to present different menus to different users , such as "},{"type":"text","marks":[{"type":"strong"}],"text":" Super administrator "},{"type":"text","text":", "},{"type":"text","marks":[{"type":"strong"}],"text":" General administrator "},{"type":"text","text":", Or a more detailed division , We need to dynamically filter according to the permissions when traversing the menu , Now let's look at an example : Super administrator login menu interface :"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/88/88c424e12378480440d2265599c75826.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Ordinary administrator login menu interface :"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/69/6913be4a3905a94b2bd86fda0dbf7e9e.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" First of all, you want to implement the permissions menu , We need to modify the menu schema structure , Add permission field , as follows :"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const menuData = [\n {\n key: '/manage',\n path: '/manage',\n text: 'dooring The workbench '\n },\n {\n key: '/manage/anazly',\n path: '/manage/anazly',\n text: ' Big data ',\n },\n {\n key: '/manage/auth',\n path: '/manage/auth',\n text: ' Member management ',\n auth: true,\n },\n {\n key: '/manage/h5',\n text: 'H5 Service center ',\n sub: [\n {\n key: '/manage/h5/config',\n path: '/manage/h5/config',\n text: 'H5 Page management ',\n },\n {\n key: '/manage/h5/tpl',\n path: '/manage/h5/tpl',\n text: ' Template library ',\n auth: true,\n }\n ]\n }\n]\n Copy code "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" As you can see from the figure above, we have added "},{"type":"text","marks":[{"type":"strong"}],"text":"auth"},{"type":"text","text":" Fields are marked as permissions , Here we mainly use "},{"type":"text","marks":[{"type":"strong"}],"text":"true"},{"type":"text","text":" and "},{"type":"text","marks":[{"type":"strong"}],"text":"false"},{"type":"text","text":" Express , Because there is only 2 In the role , If you have multiple permissions , We can use special strings or numbers to express , This only needs to be agreed with the back end . The specific implementation is as follows :"}]},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"const createMenu = (menu = []) => {\n return menu.map(item => {\n if(item.sub) {\n return \n { createMenu(item.sub) }\n \n }else {\n if((rp === 'super' && item.auth) || !item.auth) {\n return \n { item.text }\n \n }else {\n return null\n }\n }\n })\n }\n Copy code "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The above realizes the dynamic unlimited level of "},{"type":"text","marks":[{"type":"strong"}],"text":" Permission menu "},{"type":"text","text":". You can eat it directly ~"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":" be based on nodejs The authority service design of "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The above implementation is mainly the front-end level design , We all know that front end security is always unreliable , So in order to ensure the security of the system , Generally, we store menu data in the back end , Request permission menu dynamically through the interface . We can make an agreement with the back-end in advance , Let the back end return to different permission menu according to different users "},{"type":"text","marks":[{"type":"strong"}],"text":"schema"},{"type":"text","text":" that will do . Because the scheme is relatively simple , Here the author will not introduce one by one . You can refer to "},{"type":"text","marks":[{"type":"strong"}],"text":"H5-Dooring"},{"type":"text","text":" The implementation of the ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":" therefore , Are you erudite again today ?"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":" Last "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" The above tutorial has been integrated into "},{"type":"link","attrs":{"href":"https://github.com/MrXujiang/h5-Dooring","title":null},"content":[{"type":"text","text":"H5-Dooring"}]},{"type":"text","text":" in , For some of the more complex interactions , It can also be achieved through reasonable design , You can explore for yourself ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"github Address ："},{"type":"link","attrs":{"href":"https://github.com/MrXujiang/h5-Dooring","title":null},"content":[{"type":"text","text":"H5 Editor H5-Dooring"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" Open source voting portal ："},{"type":"link","attrs":{"href":"https://www.oschina.net/p/h5-dooring","title":null},"content":[{"type":"text","text":" by H5-Dooring vote "}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" If you want to learn more H5 game , "},{"type":"text","marks":[{"type":"strong"}],"text":"webpack"},{"type":"text","text":","},{"type":"text","marks":[{"type":"strong"}],"text":"node"},{"type":"text","text":","},{"type":"text","marks":[{"type":"strong"}],"text":"gulp"},{"type":"text","text":","},{"type":"text","marks":[{"type":"strong"}],"text":"css3"},{"type":"text","text":","},{"type":"text","marks":[{"type":"strong"}],"text":"javascript"},{"type":"text","text":","},{"type":"text","marks":[{"type":"strong"}],"text":"nodeJS"},{"type":"text","text":","},{"type":"text","marks":[{"type":"strong"}],"text":"canvas"},{"type":"text","text":" Data visualization and other front-end knowledge and actual combat , Welcome to the 《 Interesting front end 》 Study and discuss together , Explore the frontline... Together ."}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}