{"id":10007078,"date":"2023-01-15T22:49:31","date_gmt":"2023-01-15T14:49:31","guid":{"rendered":"https:\/\/ityet.com\/?p=10007078"},"modified":"2023-01-15T22:49:31","modified_gmt":"2023-01-15T14:49:31","slug":"%e4%b8%87%e5%ad%97%e9%95%bf%e6%96%87vueexpressmysql%e5%b8%a6%e4%bd%a0%e5%bd%bb%e5%ba%95%e6%90%9e%e6%87%82%e9%a1%b9%e7%9b%ae%e4%b8%ad%e7%9a%84%e6%9d%83%e9%99%90%e6%8e%a7%e5%88%b6%ef%bc%88%e9%99%84","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10007078","title":{"rendered":"\u4e07\u5b57\u957f\u6587~vue+express+mysql\u5e26\u4f60\u5f7b\u5e95\u641e\u61c2\u9879\u76ee\u4e2d\u7684\u6743\u9650\u63a7\u5236\uff08\u9644\u6240\u6709\u6e90\u7801\uff09"},"content":{"rendered":"<blockquote><p>\u672c\u6587\u7565\u957f\uff0c\u5efa\u8bae\u6536\u85cf\u3002<\/p><\/blockquote>\n<p><strong>\u7ebf\u4e0a\u7f51\u7ad9\u6f14\u793a\u6548\u679c\u5730\u5740\uff1a<a href=\"https:\/\/link.segmentfault.com\/?enc=4evOERExNNuKUrNX4EYx1Q%3D%3D.WiXlAkRVnoJais5wBoeo2tWQAdD1TUnEJJrB45y4l4k%3D\" rel=\"nofollow\">http:\/\/ashuai.work:8891\/home<\/a><\/strong><\/p>\n<p><strong>GitHub\u4ed3\u5e93\u5730\u5740\uff1a<a href=\"https:\/\/link.segmentfault.com\/?enc=4ZtngzbUWOYzvL5ClgzCdA%3D%3D.eQ6gFk7mzsSS96LiMsV8uebrYI2ZSX%2Fgta8TpmoED%2BbCnDOLxTAuxU5w6L%2FJjbNY\" rel=\"nofollow\">https:\/\/github.com\/shuirongsh&#8230;<\/a><\/strong><\/p>\n<blockquote><p>\u6240\u8c13\u7684\u6743\u9650\uff0c\u5176\u5b9e\u6307\u7684\u5c31\u662f\uff1a<strong><code>\u7528\u6237\u662f\u5426\u80fd\u770b\u5230\uff0c\u4ee5\u53ca\u662f\u5426\u5141\u8bb8\u5176\u5bf9\u6570\u636e\u8fdb\u884c\u589e\u5220\u6539\u67e5\u7684\u64cd\u4f5c<\/code><\/strong>\uff0c\u56e0\u4e3a\u73b0\u5728\u5f00\u53d1\u9879\u76ee\u7684\u4e3b\u6d41\u65b9\u5f0f\u662f\u524d\u540e\u7aef\u5206\u79bb\uff0c\u6240\u4ee5\u6574\u4e2a\u9879\u76ee\u7684\u6743\u9650\u662f<code>\u540e\u7aef\u6743\u9650\u63a7\u5236<\/code>\u642d\u914d<code>\u524d\u7aef\u6743\u9650\u63a7\u5236<\/code>\u5171\u540c\u5b9e\u73b0\u7684<\/p><\/blockquote>\n<h2>\u540e\u7aef\u6743\u9650<\/h2>\n<h3>1. \u77e5\u9053\u662f\u54ea\u4e2a\u7528\u6237\uff08\u89d2\u8272\uff09\u53d1\u7684\u8bf7\u6c42<\/h3>\n<ul>\n<li>token\u5224\u65ad\uff08\u524d\u7aef\u8bf7\u6c42\u5934\u4e2d\u4f20\u8fc7\u53bb\uff0c\u901a\u8fc7\u8bf7\u6c42\u62e6\u622a\u5668\uff09<\/li>\n<li>userid\u5224\u65ad\uff08\u524d\u7aef\u8bf7\u6c42\u5934\u4e2d\u4f20\u8fc7\u53bb\uff0c\u901a\u8fc7\u8bf7\u6c42\u62e6\u622a\u5668\uff09<\/li>\n<li>cookie\u5224\u65ad\uff08\u7528\u7684\u5c11\uff09<\/li>\n<li>session\u5224\u65ad\uff08\u7528\u7684\u5f88\u5c11\uff09<\/li>\n<\/ul>\n<h3>2. \u6743\u9650\u8bbe\u8ba1\u6a21\u5f0f<\/h3>\n<p><strong>RBAC\u6a21\u5f0f<\/strong>~\u57fa\u4e8e\u89d2\u8272\u7684\u6743\u9650\u8bbf\u95ee\u63a7\u5236<code>\uff08Role-Based Access Control\uff09<\/code>\u662f\u5546\u4e1a\u7cfb\u7edf\u4e2d\u6700\u5e38\u89c1\u7684\u6743\u9650\u7ba1\u7406\u6280\u672f\u4e4b\u4e00\u3002<\/p>\n<p>\u5173\u4e8e\u4ec0\u4e48\u662f<code>RBAC\u6a21\u5f0f<\/code>\u7684\u6982\u5ff5\u672c\u6587\u8fd9\u91cc\u4e0d\u505a\u8d58\u8ff0\uff0c\u5927\u5bb6\u53ef\u4ee5\u8fd9\u6837\u7406\u89e3\uff1a<\/p>\n<h4>2.1 RBAC\u6a21\u5f0f<\/h4>\n<ul>\n<li>\u67d0\u4e2a\u7cfb\u7edf\u6709\u4e00\u4e9b\u4eba\u5728\u4f7f\u7528\uff0c\u4f46\u662f\u4f7f\u7528\u8fd9\u4e2a\u7cfb\u7edf\u7684\u8fd9\u4e9b\u4eba\u5206\u4e3a\u4e24\u4e2a\u6d3e\u7cfb\u3002\u6709\u8001\u677f\u6d3e\uff08\u8001\u677f\u3001\u8001\u677f\u5c0f\u59e8\u5b50\u3001\u8001\u677f\u5c0f\u8205\u5b50\u7b49\uff09\uff0c\u4e5f\u6709\u6253\u5de5\u4ed4\u6d3e\uff08\u5f20\u4e09\u3001\u674e\u56db\u3001\u738b\u4e8c\u3001\u9ebb\u5b50\uff09\u3002<\/li>\n<li>\u7cfb\u7edf\u6709\u4e00\u4e9b\u9875\u9762\u7528\u4e8e\u5c55\u793a\u6570\u636e\uff0c\u4f5c\u4e3a\u8001\u677f\u6d3e\u7684\u76f8\u5173\u5de5\u4f5c\u4eba\u5458\uff0c\u80af\u5b9a\u662f\u54ea\u4e2a\u9875\u9762\u90fd\u80fd\u591f\u770b\u5230\uff0c\u6bd5\u7adf\u516c\u53f8\u90fd\u662f\u8001\u677f\u7684\uff0c\u5fc5\u987b\u4ec0\u4e48\u90fd\u80fd\u770b\u5230<\/li>\n<li>\u800c\u4f5c\u4e3a\u6253\u5de5\u4ed4\u6d3e\u7684\u5de5\u4f5c\u4eba\u5458\uff0c\u80af\u5b9a\u662f\u6743\u9650\u6bd4\u8f83\u4f4e\u4e86\uff0c\u53ea\u80fd\u770b\u5230\u4e00\u4e2a\u4e1a\u7ee9\u9875\u9762\uff08\u5047\u8bbe\u4e1a\u7ee9\u9875\u9762\u8bb0\u5f55\u4e86\u81ea\u5df1\u6bcf\u4e2a\u6708\u4e3a\u516c\u53f8\u521b\u9020\u7684\u4e1a\u7ee9\uff09<\/li>\n<li>\u8fd9\u4e2a\u6848\u4f8b\u4e2d\u7684\u8001\u677f\u6d3e\u548c\u6253\u5de5\u4ed4\u6d3e\u5c31\u662f\u4e24\u4e2a\u89d2\u8272\uff0c\u800c\u8001\u677f\u3001\u8001\u677f\u5c0f\u59e8\u5b50\u3001\u8001\u677f\u5c0f\u8205\u5b50\u548c\u5f20\u4e09\u3001\u674e\u56db\u3001\u738b\u4e8c\u3001\u9ebb\u5b50\u8fd9\u4e9b\u7528\u6237\u5c31\u662f\u96b6\u5c5e\u4e8e\u89d2\u8272\u7684\u7528\u6237<\/li>\n<li><strong>\u7528\u6237\u662f\u89d2\u8272\u7684\u5177\u8c61\u5316\u4f53\u73b0<\/strong><\/li>\n<li>\u7528\u6237\u7684\u6570\u91cf\u4e00\u822c\u90fd\u5927\u4e8e\u89d2\u8272\u7684\u6570\u91cf\u7684\uff08\u60f3\u4e00\u4e0b&#8230;\uff09<\/li>\n<li>\u6240\u4ee5\u6211\u4eec\u5728\u505a\u6743\u9650\u63a7\u5236\u7684\u65f6\u5019\uff0c\u53ea\u9700\u8981\u63a7\u5236\u89d2\u8272\u80fd\u770b\u5230\u90a3\u4e2a\u9875\u9762\u5373\u53ef\uff0c\u81f3\u4e8e\u7528\u6237\u5c31\u8ba9\u4ed6\u96b6\u5c5e\u4e8e\u8fd9\u4e2a\u89d2\u8272\u4fbf\u662f<\/li>\n<li>\u901a\u8fc7\u7528\u6237\u548c\u89d2\u8272\u8fdb\u884c\u5173\u8054\uff0c\u4e5f\u505a\u5230\u4e86\u590d\u7528\u548c\u89e3\u8026<\/li>\n<li><strong>\u89d2\u8272\u80fd\u770b\u5230\u54ea\u4e2a\u9875\u9762\uff0c\u53d6\u51b3\u4e8e\u89d2\u8272\u548c\u83dc\u5355\u9875\u9762\u8fdb\u884c\u7684\u5173\u8054<\/strong>\uff08\u901a\u8fc7\u52fe\u9009\u83dc\u5355\u6811\u5173\u8054\uff09<\/li>\n<\/ul>\n<p>\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n<ul>\n<li>\u7ed9\u5bf9\u5e94\u89d2\u8272\u8d4b\u4e88\uff08\u5206\u914d\uff09\u76f8\u5e94\u83dc\u5355\u6743\u9650<\/li>\n<li>\u8ba9\u65b0\u5efa\u7684\u7528\u6237\u96b6\u5c5e\u4e8e\u67d0\u4e2a\u89d2\u8272\uff0c\u5c31\u662f\u7ed9\u65b0\u5efa\u7684\u7528\u6237\u5206\u914d\u4e00\u4e0b\u89d2\u8272<\/li>\n<\/ul>\n<h4>2.2 \u540e\u7aef\u5efa\u8868<\/h4>\n<p><strong>\u6b63\u5e38\u60c5\u51b5\u4e0b\u9700\u8981\u4e94\u5f20\u8868\uff1a<\/strong><\/p>\n<ul>\n<li>\u83dc\u5355\u8868\uff08\u7528\u4e8e\u5b58\u50a8\u7cfb\u7edf\u7684\u83dc\u5355\u4fe1\u606f\uff0c\u5982\u83dc\u5355\u7684\u540d\u5b57\u3001\u70b9\u51fb\u8fd9\u4e2a\u83dc\u5355\u8981\u53bb\u8df3\u8f6c\u7684\u8def\u7531url\u3001\u4ee5\u53ca\u8fd9\u4e2a\u83dc\u5355\u7684icon\u56fe\u6807\u540d\u3001\u83dc\u5355id\u7b49&#8230;\uff09<\/li>\n<li>\u89d2\u8272\u8868\uff08\u7528\u4e8e\u5b58\u50a8\u7cfb\u7edf\u7684\u89d2\u8272\u4fe1\u606f\uff0c\u5982\u89d2\u8272\u540d\u3001\u89d2\u8272id\u3001\u89d2\u8272\u5907\u6ce8\u7b49&#8230;\uff09<\/li>\n<li>\u89d2\u8272\u83dc\u5355\u8868\uff08\u7528\u4e8e\u5b58\u50a8\u67d0\u4e2a\u89d2\u8272\u80fd\u770b\u5230\u83dc\u5355id\u6709\u54ea\u4e9b\uff0c\u4e00\u4e2a\u89d2\u8272id\u5bf9\u5e94\u591a\u4e2a\u83dc\u5355id\uff0c\u4e00\u5bf9\u591a\u5173\u7cfb\uff09<\/li>\n<li>\u7528\u6237\u8868\uff08\u7528\u4e8e\u5b58\u50a8\u7528\u6237\u96b6\u5c5e\u4e8e\u54ea\u4e2a\u89d2\u8272\uff0c\u6bd4\u5982\u8001\u677f\u5c0f\u8205\u5b50\u5c31\u662f\u96b6\u5c5e\u4e8e\u8001\u677f\u89d2\u8272\uff0c\u4ee5\u53ca\u7528\u6237\u540d\u3001\u7528\u6237id\u3001\u7528\u6237\u5907\u6ce8\u5565\u7684&#8230;\uff09<\/li>\n<li>\u7ec4\u7ec7\u8868\uff08\u7528\u4e8e\u8bb0\u5f55\u89d2\u8272\u5c5e\u4e8e\u54ea\u4e2a\u7ec4\u7ec7\uff0c\u518d\u5927\u4e00\u4e9b\u7684\u7cfb\u7edf\u9879\u76ee\u4f1a\u5efa\u6b64\u8868\uff0c\u5c0f\u9879\u76ee\u6ca1\u6709\u4e5f\u884c\uff09<\/li>\n<\/ul>\n<p><strong>\u4e09\u5f20\u8868\u4e5f\u80fd\u7528<\/strong><\/p>\n<p>\u6211\u4eec\u5c06\u89d2\u8272\u83dc\u5355\u8868\uff0c\u7cc5\u5728\u89d2\u8272\u8868\u4e2d\uff0c\u8fd9\u6837\u7684\u8bdd\uff0c\u53ea\u8981\u65b0\u5efa\u83dc\u5355\u8868\u3001\u89d2\u8272\u8868\uff08\u5305\u542b\u89d2\u8272\u83dc\u5355\u4fe1\u606f\uff09\u3001\u7528\u6237\u8868\uff0c\u6839\u636e\u7528\u6237\u7684\u7528\u6237\u540d\u548c\u5bc6\u7801\u8fdb\u884c\u767b\u5f55\uff08\u540e\u7aef\u4f1a\u6839\u636e\u7528\u6237\u540d\u548c\u5bc6\u7801\u67e5\u8be2\u5230\u8fd9\u4e2a\u7528\u6237\u96b6\u5c5e\u4e8e\u90a3\u4e2a\u89d2\u8272\u4e0b\uff0c\u4ece\u800c\u8fd4\u56de\u6b64\u7528\u6237\u5bf9\u5e94\u89d2\u8272\u7684\u83dc\u5355\u4fe1\u606f\u6570\u636e\uff09<\/p>\n<p><strong>\u672c\u6587\u6f14\u793a\u5efa\u4e24\u5f20\u8868<\/strong><\/p>\n<p>\u4e3a\u4e86\u66f4\u597d\u7684\u4fbf\u4e8e\u5927\u5bb6\u7406\u89e3\uff0c\u672c\u6587\u53ea\u65b0\u5efa\u4e24\u5f20\u8868\uff0c\u4e00\u5f20\u662f\u83dc\u5355\u8868\uff0c\u53e6\u4e00\u5f20\u662f\u89d2\u8272\u8868\uff08\u89d2\u8272\u8868\u4e2d\u5b58\u6b64\u89d2\u8272\u80fd\u770b\u5230\u7684\u5355id\uff09\uff0c\u800c\u767b\u5f55\u7684\u65f6\u5019\uff0c\u5927\u5bb6\u9009\u62e9\u89d2\u8272\u767b\u5f55\uff0c\u5176\u5b9e\u9009\u62e9\u7528\u6237\u767b\u5f55\u4ece\u67d0\u79cd\u610f\u4e49\u4e0a\u6765\u8bf4\uff0c\u4e5f\u662f\u76f8\u5f53\u4e8e\u89d2\u8272\u767b\u5f55\u3002<\/p>\n<p><strong>\u7b2c\u4e00\u6b65\uff1a<\/strong><\/p>\n<p>\u89d2\u8272\u767b\u5f55\u53d1\u8bf7\u6c42\uff0c\u540e\u7aef\u8fd4\u56de\u6b64\u89d2\u8272\u5bf9\u5e94\u7684\u83dc\u5355\u6811\u6570\u636e\uff08\u9700\u8981\u524d\u7aef\u8fdb\u4e00\u6b65\u52a0\u5de5\u4e00\u4e0b\uff09\uff0c\u524d\u7aef\u83b7\u53d6\u83dc\u5355\u6811\u6570\u636e\u4ee5\u540e\uff0c\u5c06\u5176\u5b58\u5230<code>vuex<\/code>\u4e2d\u6bd4\u5982\u662f<code>menuTree<\/code>\u6570\u7ec4\u5b57\u6bb5\uff0c<code>el-menu<\/code>\u7ec4\u4ef6\u518d\u53d6\u5230<code>vuex<\/code>\u4e2d\u7684<code>menuTree<\/code>\u6570\u7ec4\u6570\u636e\u4f7f\u7528\uff0c\u6839\u636e\u8fd9\u4e2a\u83dc\u5355\u6811\u6570\u636e\u8fdb\u884c\u81ea\u52a8\u9012\u5f52\u6e32\u67d3<\/p>\n<blockquote><p>\u5173\u4e8eel-menu\u7ec4\u4ef6\u7684\u9012\u5f52\u81ea\u8c03\u7528\uff0c\u53ef\u4ee5\u53c2\u89c1\u7b14\u8005\u4e4b\u524d\u7684\u8fd9\u7bc7\u6587\u7ae0\uff1a<a href=\"https:\/\/segmentfault.com\/a\/1190000040796413\">https:\/\/segmentfault.com\/a\/11&#8230;<\/a>   \u82e5\u5bf9\u4e8e\u7ec4\u4ef6\u9012\u5f52\u77e5\u8bc6\u5fd8\u4e86\uff0c\u53ef\u4ee5\u53c2\u89c1\u7b14\u8005\u7684\u8fd9\u7bc7\u6587\u7ae0\uff1a<a href=\"https:\/\/segmentfault.com\/a\/1190000040765657\">https:\/\/segmentfault.com\/a\/11&#8230;<\/a><\/p><\/blockquote>\n<p><strong>\u7b2c\u4e8c\u6b65\uff1a<\/strong><\/p>\n<p>\u7b2c\u4e00\u6b65\u4e2d\uff0c\u5b8c\u6210\u4e86<code>el-menu<\/code>\u7ec4\u4ef6\u7684\u6e32\u67d3\u5c55\u793a\uff0c\u4f46\u662f\u8fd8\u5c11\u4e86\u8def\u7531\u8868\u6811\u7ed3\u6784\u6570\u7ec4\u6570\u636e\uff08\u56e0\u4e3a\u70b9\u51fb\u83dc\u5355\u9700\u8981\u8fdb\u884c\u8def\u7531\u8df3\u8f6c\uff09\uff0c\u6240\u4ee5\u6211\u4eec\u8fd8\u9700\u8981\u518d\u641e\u4e00\u4efd\u6570\u636e<code>routerTree<\/code>\uff0c\u8fd9\u4e2a<code>routerTree<\/code>\u6570\u636e\u662f\u6839\u636e\u540e\u7aef\u8fd4\u56de\u7684\u83dc\u5355\u6811\u6570\u636e\uff0c\u52a0\u5de5\u6210\u7b26\u5408\u8def\u7531\u8868\u6811\u7ed3\u6784\u7684\u6570\u7ec4\uff0c\u8fd9\u4e2a\u6570\u7ec4\u662f\u7ed9\u8def\u7531\u8868\u4f7f\u7528\u7684<\/p>\n<ul>\n<li><code>routerTree<\/code>\u7684\u503c\u662f\u52a8\u6001\uff0c\u56e0\u4e3a\u4e0d\u540c\u89d2\u8272\u7684<code>routerTree<\/code>\u4e0d\u4e00\u6837<\/li>\n<li>\u5bf9\u5e94\u7684\u8def\u7531\u8868\u8fd8\u6709\u9759\u6001\u7684\uff0c\u4e0d\u53d8\u7684\uff0c\u6bd4\u5982<code>404<\/code>\u8def\u7531\u3001<code>login<\/code>\u8def\u7531\u3001<code>\u9996\u9875home<\/code>\u8def\u7531<\/li>\n<li>\u9759\u6001\u8def\u7531\u524d\u7aef\u76f4\u63a5\u5199\u6b7b\u5373\u53ef\uff0c\u52a8\u6001\u8def\u7531\u4f7f\u7528<code>router.addRoutes(routerTree)<\/code>\u5c06\u5176\u6dfb\u52a0\u5230\u8def\u7531\u8868\u4e2d\u5373\u53ef<\/li>\n<\/ul>\n<blockquote>\n<p>\u81f3\u4e8e\u5237\u65b0\u9875\u9762<code>vuex<\/code>\u4e2d\u6570\u636e\u4e22\u5931\uff0c\u5c31\u91cd\u53d1\u4e00\u6b21\u8bf7\u6c42\uff0c\u6216\u8005\u672c\u5730\u5b58\u4e00\u4efd\u90fd\u884c\u7684<\/p>\n<p>\u5b9e\u9645\u4e0a\uff0c\u5237\u65b0\u9875\u9762\uff0c\u5e76\u4e0d\u662f<code>vuex<\/code>\u4e2d\u7684\u6570\u636e\u4e22\u5931\uff0c\u800c\u662f\uff0c\u800c\u662f<code>vuex<\/code>\u4e2d\u7684\u6570\u636e\u521d\u59cb\u5316\u4e86\uff08\u56de\u5230\u6700\u521d\u7684\u6837\u5b50\uff0c\u6700\u521d\u65f6\uff0cvuex\u4e2d\u7684\u6570\u636e\u672c\u6765\u5c31\u662f\u7a7a\u7684\uff09<\/p>\n<\/blockquote>\n<p>\u901a\u8fc7\u4e0a\u8ff0\u4e24\u6b65\u9aa4\uff0c\u4e00\u4e2a\u6743\u9650\u7cfb\u7edf\u7684\u57fa\u672c\u6837\u5b50\u7ed3\u6784\u5c31\u51fa\u6765\u4e86\uff0c\u53ea\u4e0d\u8fc7\u8fd8\u6709\u4e00\u4e9b\u7ec6\u8282\u9700\u8981\u5904\u7406\uff0c\u8fd9\u4e2a\u8bf7\u7ee7\u7eed\u5f80\u4e0b\u9605\u8bfb<\/p>\n<h2>\u524d\u7aef\u6743\u9650\u7ec6\u5316\u63a7\u5236<\/h2>\n<p>\u524d\u7aef\u6743\u9650\u7ec6\u5316\u5206\u7c7b\u5927\u81f4\u53ef\u4ee5\u5206\u4e3a\u56db\u79cd\uff1a<\/p>\n<ul>\n<li>\u83dc\u5355\u7684\u6743\u9650\u63a7\u5236<\/li>\n<li>\u9875\u9762\u7684\u6743\u9650\u63a7\u5236<\/li>\n<li>\u6309\u94ae\u7684\u6743\u9650\u63a7\u5236<\/li>\n<li>\u5b57\u6bb5\u7684\u6743\u9650\u63a7\u5236<\/li>\n<\/ul>\n<h3>1.\u83dc\u5355\u7684\u6743\u9650\u63a7\u5236\uff08\u4ee5\u5de6\u4fa7\u5bfc\u822a\u83dc\u5355\u4e3a\u4f8b\uff09<\/h3>\n<p>\u4e0d\u540c\u89d2\u8272\u7684\u7528\u6237\u767b\u5f55\u4ee5\u540e\uff0c\u770b\u5230\u7684\u662f\u4e0d\u540c\u7684\u83dc\u5355\u5185\u5bb9\u3002\u6bd4\u5982\uff1a<\/p>\n<ul>\n<li>\u666e\u901a\u89d2\u8272\uff08\u7684\u7528\u6237\uff09\uff0c\u53ea\u80fd\u770b\u5230\u67d0\u4e00\u4e2a\u83dc\u5355<\/li>\n<li>\u7ba1\u7406\u5458\u89d2\u8272\u80fd\u770b\u5230\u6240\u6709\u7684\u83dc\u5355<\/li>\n<li>\u4ee5<code>el-menu<\/code>\u83dc\u5355\u7ec4\u4ef6\u8fdb\u884c\u4e3e\u4f8b\u8bf4\u660e<\/li>\n<\/ul>\n<h3>2.\u9875\u9762\u7684\u6743\u9650\u63a7\u5236<\/h3>\n<ul>\n<li>\u89d2\u8272\u6ca1\u767b\u5f55\u65f6\uff0c\u624b\u52a8\u5728\u5730\u5740\u680f\u8f93\u5165<code>url<\/code>\u5730\u5740\u8df3\u8f6c\uff0c\u5c31\u5f3a\u5236\u7528\u6237\u8df3\u8f6c\u5230\u767b\u5f55\u9875<\/li>\n<li>\u89d2\u8272\u767b\u5f55\u540e\uff0c\u624b\u52a8\u5728\u5730\u5740\u680f\u8f93\u5165\u4e0d\u5b58\u5728\u7684<code>url<\/code>\uff08\u6216\u8005\u81ea\u5df1\u4e0d\u80fd\u770b\u7684<code>url<\/code>\uff09\u5730\u5740\u8df3\u8f6c\uff0c\u8ba9\u5176\u8df3\u8f6c<code>404\u9875\u9762<\/code><\/li>\n<li>\u67d0\u4e9b\u7279\u6b8a\u7684\u9875\u9762\uff0c\u8fd8\u53ef\u4ee5\u4f7f\u7528<code>vue-router<\/code>\u4e2d\u7684<code>beforeRouteEnter<\/code>\u518d\u8fdb\u884c\u7ec6\u5316\u63a7\u5236<\/li>\n<\/ul>\n<blockquote>\n<p>\u5047\u8bbe\u6253\u5de5\u4ed4\u5f20\u4e09\uff0c\u60f3\u8981\u53bb\u770b\u8001\u677f\u7684\u9875\u9762\uff0c\u56e0\u4e3a\u81ea\u5df1\u767b\u5f55\u65f6\uff0c\u540e\u7aef\u8fd4\u56de\u7684\u83dc\u5355\u6811\u4e2d\u6ca1\u6709\u8001\u677f\u9875\u9762\u7684\u6570\u636e\uff0c\u6240\u4ee5\u8def\u7531\u8868\u4e2d\u4e5f\u6ca1\u6709\u8001\u677f\u9875\u9762\u7684\u8def\u7531\uff0c\u6240\u4ee5\u5730\u5740\u680f<code>url<\/code>\u76f4\u63a5\u8df3\u8f6c\u65f6\uff0c\u5c31\u4f1a\u8df3\u8f6c\u5230\u4e00\u4e2a\u4e0d\u5b58\u5728\u7684\u8def\u7531\u9875\u9762\uff0c\u5c31\u4e0d\u4f1a\u663e\u793a\u51fa\u4e1c\u897f\u4e86\u3002<\/p>\n<p>\u5173\u4e8e\u8def\u7531\uff0c\u5927\u5bb6\u4e5f\u53ef\u4ee5\u8fd9\u6837\u7406\u89e3\uff1a\u5c31\u662f\u5f53\u5730\u5740\u680f\u4e2d\u8f93\u5165\u5bf9\u5e94\u7684<code>path<\/code>\u5373<code>url<\/code>\u65f6\uff0c<code>\u8def\u7531\u8868\u5927\u4f6c<\/code>\u53bb\u505a\u5bf9\u5e94\u5339\u914d\uff0c\u5339\u914d\u5230\u4e86\u4ee5\u540e\uff0c\u518d\u53bb\u6e32\u67d3\u5bf9\u5e94\u7684<code>.vue\u7ec4\u4ef6<\/code>\u4ece\u800c\u5448\u73b0\u5bf9\u5e94\u7684\u6570\u636e\u5185\u5bb9\uff08\u5339\u914d\u4e0d\u5230\u90a3\u5c31<code>404<\/code>\u5457\uff09<\/p>\n<\/blockquote>\n<h3>3.\u6309\u94ae\u7684\u6743\u9650\u63a7\u5236<\/h3>\n<p>\u6309\u94ae\u7684\u63a7\u5236\uff0c\u53ef\u4ee5\u7ec6\u5206\u4e3a\u4e24\u5757\uff1a\u4e00\u662f : \u662f\u5426\u80fd\u770b\u5230\u8fd9\u4e2a\u6309\u94ae\u3001\u53e6\u5916\u662f : \u80fd\u770b\u5230\u4e0d\u8fc7\u662f\u5426\u80fd\u70b9\u51fb\u8fd9\u4e2a\u6309\u94ae\uff08\u6309\u94ae\u662f\u5426\u7981\u7528\uff09<\/p>\n<ul>\n<li>\u6309\u94ae\u662f\u5426\u5c55\u793a\uff0c\u53d6\u51b3\u4e8e\u662f\u5426\u7ed9\u89d2\u8272\u5206\u914d\u4e86\u6309\u94ae\u6743\u9650\u3002<\/li>\n<li>\u5982\u6709\u7684\u53ea\u80fd\u770b\u5230<code>\u67e5\u770b\u6309\u94ae<\/code>\uff0c\u6709\u7684<code>\u589e\u5220\u6539\u67e5\u6309\u94ae<\/code>\u90fd\u53ef\u4ee5\u770b\u5230<\/li>\n<li>\u518d\u4e00\u4e2a\uff0c\u6211\u4eec\u53ef\u4ee5\u628a\u6309\u94ae\u5f53\u505a\u662f\u4e00\u4e2a\u7279\u6b8a\u7684\u83dc\u5355\u9875\u9762<\/li>\n<li>\u6700\u540e\uff0c\u8981\u6709\u4e00\u4e2a\u89c4\u5219\u9650\u5236\uff0c\u65b0\u589e\u8282\u70b9\u65f6\uff0c\u53ef\u4ee5\u65b0\u589e\u83dc\u5355\u8282\u70b9\uff0c\u4e5f\u53ef\u4ee5\u65b0\u589e\u6309\u94ae\u8282\u70b9\uff0c\u53ea\u4e0d\u8fc7\u6309\u94ae\u8282\u70b9\u6c38\u8fdc\u662f\u6700\u5e95\u5c42\u7684\u4f4d\u7f6e\uff0c\u4e0d\u80fd\u5728\u6309\u94ae\u8282\u70b9\u4e0b\u518d\u53bb\u65b0\u589e\u9875\u9762\uff08\u65e0\u610f\u4e49\u64cd\u4f5c\uff09<\/li>\n<li>\u4e0d\u7406\u89e3\u4e0a\u9762\u90a3\u53e5\u8bdd\uff0c\u8bf7\u7ee7\u7eed\u5f80\u4e0b\u9605\u8bfb<\/li>\n<\/ul>\n<blockquote>\n<p>\u6ce8\u610f\uff0c\u5728\u9879\u76ee\u4e2d\u6700\u597d\u4e0d\u8981\u4f7f\u7528\u7981\u7528\u6309\u94ae\u53bb\u63a7\u5236\u6743\u9650\uff0c\u5982\u679c\u89d2\u8272\u7528\u6237\u6ca1\u6709\u67d0\u4e2a\u6309\u94ae\u7684\u6743\u9650\uff0c\u76f4\u63a5\u5220\u9664\u8fd9\u4e2a\u8282\u70b9\u5373\u53ef\uff0c\u6bd4\u5982<code>v-if<\/code>\uff0c\u6216<code>el.parentNode.removeChild(el)<\/code>\uff0c\u56e0\u4e3a\u4f7f\u7528\u7981\u7528\u6309\u94ae\u53bb\u63a7\u5236\u6743\u9650\u5b58\u5728\u4e00\u5b9a\u98ce\u9669\uff0c\u5982\u7b14\u8005\u7684\u8fd9\u7bc7\u6587\u7ae0\uff1a<a href=\"https:\/\/segmentfault.com\/a\/1190000041887834\">https:\/\/segmentfault.com\/a\/11&#8230;<\/a><\/p>\n<p>\u7279\u6b8a\u60c5\u51b5\u4e0b\uff0c\u4f7f\u7528\u7981\u7528\u6309\u94ae\u4e5f\u53ef\u4ee5\u53bb\u5206\u914d\u63a7\u5236\u6743\u9650\uff0c\u5177\u4f53\u60c5\u51b5\u5177\u4f53\u5206\u6790<\/p>\n<\/blockquote>\n<h3>4. \u5b57\u6bb5\u7684\u6743\u9650\u63a7\u5236<\/h3>\n<p>\u5982\u4e0b\u7684\u8868\u683c\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>\u59d3\u540d<\/th>\n<th><code>\u5e74\u9f84<\/code><\/th>\n<th>\u5bb6\u4e61<\/th>\n<th>\u7231\u597d<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u5b59\u609f\u7a7a<\/td>\n<td>500<\/td>\n<td>\u82b1\u679c\u5c71<\/td>\n<td>\u5927\u95f9\u5929\u5bab<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u6bd4\u5982\u5e74\u9f84\u5b57\u6bb5\u662f\u9690\u79c1\uff0c\u53ea\u6709\u8001\u677f\u80fd\u770b\u5230\u5458\u5de5\u7684\u5e74\u9f84\uff0c\u8001\u677f\u7684\u5c0f\u59e8\u5b50\u548c\u5c0f\u8205\u5b50\u90fd\u4e0d\u80fd\u770b\u5230\uff0c\u8fd9\u4e2a\u9700\u6c42\u7684\u5b9e\u73b0\u53ef\u4ee5\u524d\u7aef\u6839\u636e\u89d2\u8272id\u8fdb\u884c\u8fc7\u6ee4\uff1b\u6216\u8005\u540e\u7aef\u518d\u5efa\u8868\u505a\u6620\u5c04\u5173\u7cfb\uff0c\u8fd4\u56de\u7ed9\u524d\u7aef\u3002<\/p>\n<p>\u7bc7\u5e45\u539f\u56e0\uff0c\u8fd9\u91cc\u4e0d\u8d58\u8ff0\u4e86\u3002\u540e\u7eed\u7a7a\u95f2\u4e86\uff0c\u7b14\u8005\u518d\u5199\u4e00\u7bc7\u4ecb\u7ecd<\/p>\n<h2>\u540e\u7aef\u5efa\u83dc\u5355\u8868\u548c\u89d2\u8272\u8868<\/h2>\n<p>\u6211\u4eec\u5148\u4ece\u540e\u7aef\u5f00\u59cb\u5199\uff0c\u5173\u4e8e\u6bcf\u4e2a\u5b57\u6bb5\u7684\u610f\u601d\uff0c\u7b14\u8005\u5728\u4ee3\u7801\u4e2d\u63d0\u5230\u4e86<\/p>\n<h3>1. \u83dc\u5355\u8868<\/h3>\n<p>\u4e24\u5f20\u8868\u90fd\u5728\u4ee3\u7801\u4e2d\uff0c\u5927\u5bb6\u9605\u8bfb\u5b8c\u6587\u7ae0\u4ee5\u540e\uff0c\u53ef\u4ee5\u5728<code>GitHub<\/code>\u4ed3\u5e93\u4e2d\u81ea\u884c\u83b7\u53d6<\/p>\n<h4>1.1\u83dc\u5355\u8868\u6570\u636e\u5e93\u622a\u56fe<\/h4>\n<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc5Z99\" alt=\"\" title=\"\" loading=\"lazy\"><\/p>\n<p>\u8fd9\u91cc\u6709\u51e0\u4e2a\u5b57\u6bb5\u9700\u8981\u7740\u91cd\u4ecb\u7ecd\u4e00\u4e0b\uff1a<\/p>\n<h4>1.2<code>pid<\/code>\u5b57\u6bb5<\/h4>\n<p><code>pid<\/code>\u5b57\u6bb5\uff0c\u5373\u4e3a\uff1a<code>parentId<\/code>\u662f\u7236\u7ea7\u8282\u70b9\u5b57\u6bb5\uff0c\u5c31\u662f\u5f53\u524d\u8282\u70b9\u7684\u7236\u8282\u70b9\uff0c\u540e\u7aef\u5728\u6570\u636e\u5e93\u4e2d\u5b58\u50a8\u524d\u7aef\u83dc\u5355\u6811\u6570\u636e\u65f6\uff0c\u662f\u4e0d\u4f1a\u5b58\u6210\u6811\u7ed3\u6784\u7684\u6570\u636e\u7684\uff08JSON\u5f62\u5f0f\u9664\u5916\uff0c\u4f46\u8fd9\u79cd\u65b9\u5f0f\u5f88\u5c11\u7528\uff09\u540e\u7aef\u5b58\u50a8\u7684\u6570\u636e\u662f\uff1a\u628a\u6811\u7ed3\u6784\u7684\u6570\u636e<code>\u94fa\u5e73\uff08\u62cd\u5e73\uff09<\/code>\u4ee5\u540e\u7684\u6570\u636e\u3002<\/p>\n<p>\u6bd4\u5982\u6211\u4eec\u6709\u8fd9\u6837\u4e00\u4e2a\u6811\u7ed3\u6784\u6570\u636e<\/p>\n<pre><code class=\"js\">let treeData = [\n        {\n                id: 1,\n                name: '\u4e2d\u56fd',\n                children: [ \/\/ \u6709\u7684\u540e\u7aef\u559c\u6b22\u4f7f\u7528child\u5b57\u6bb5\uff0c\u4e00\u4e2a\u610f\u601d\n                        {\n                                id: 3,\n                                name: '\u5317\u4eac',\n                        },\n                        {\n                                id: 4,\n                                name: '\u4e0a\u6d77',\n                                children: [\n                                        {\n                                                id: 6,\n                                                name: '\u6d66\u4e1c\u65b0\u533a'\n                                        }\n                                ]\n                        },\n                ]\n        },\n        {\n                id: 2,\n                name: '\u7f8e\u56fd',\n                children: [ \/\/ \u6709\u7684\u540e\u7aef\u559c\u6b22\u4f7f\u7528child\u5b57\u6bb5\uff0c\u4e00\u4e2a\u610f\u601d\n                        {\n                                id: 5,\n                                name: '\u7ebd\u7ea6',\n                        },\n                ]\n        },\n]<\/code><\/pre>\n<p>\u6570\u636e\u5e93\u4e2d\u53ef\u4e0d\u4f1a\u76f4\u63a5\u5b58\u4e00\u4e2a\u6811\u7ed3\u6784\uff0c\u6570\u636e\u5e93\u4f1a\u628a\u6811\u7ed3\u6784\u62cd\u5e73\u5b58\u8d77\u6765\uff0c\u5373\u8fd9\u6837\u5b58\u50a8\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>pid<\/th>\n<th>id<\/th>\n<th>name<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>0<\/td>\n<td>1<\/td>\n<td>\u4e2d\u56fd<\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>3<\/td>\n<td>\u5317\u4eac<\/td>\n<\/tr>\n<tr>\n<td>1<\/td>\n<td>4<\/td>\n<td>\u4e0a\u6d77<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>6<\/td>\n<td>\u6d66\u4e1c\u65b0\u533a<\/td>\n<\/tr>\n<tr>\n<td>0<\/td>\n<td>2<\/td>\n<td>\u7f8e\u56fd<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>5<\/td>\n<td>\u7ebd\u7ea6<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote>\n<p>\u6ce8\u610f\uff01\u6570\u636e\u5e93\u4e2d\u4e0d\u9700\u8981\u5b58\u50a8<code>children<\/code>\u5b57\u6bb5\uff0c<code>children<\/code>\u5b57\u6bb5\u662f\u4e00\u4e2a\u865a\u62df\u5b57\u6bb5\uff0c\u662f\u5f53\u540e\u7aef\u540c\u4e8b\u67e5\u8be2\u83dc\u5355\u8868\u6570\u636e\u7ed3\u6784\u65f6\uff0c\u5c06\u6241\u5e73\u5316\u7684\u6570\u636e\u8f6c\u6210\u6811\u7ed3\u6784\u65f6\uff0c\u9012\u5f52\u4ee3\u7801\u521b\u5efa\u7684\uff0c\u5e76\u8fd4\u56de\u7ed9\u524d\u7aef\u3002<\/p>\n<p>\u5b9e\u9645\u4e0a\uff0c\u540e\u7aef\u540c\u4e8b\u53ef\u4ee5\u76f4\u63a5\u5c06<code>sql<\/code>\u8bed\u53e5\u67e5\u8be2\u5230\u7684\u6241\u5e73\u5316\u6570\u636e\u5e93\u6570\u636e\u6570\u7ec4\u76f4\u63a5\u4e22\u7ed9\u524d\u7aef\uff0c\u81f3\u4e8e\u52a0\u5de5\u6210\u6811\u7ed3\u6784\uff0c\u4e5f\u53ef\u4ee5\u7531\u524d\u7aef\u540c\u4e8b\u53bb\u52a0\u5de5\uff0c\u4e0d\u8fc7\u6b63\u5e38\u60c5\u51b5\u4e0b\uff0c\u6241\u5e73\u5316\u6570\u636e\u8f6c\u6210\u6811\u7ed3\u6784\u6570\u636e\u90fd\u662f\u540e\u7aef\u505a\u7684\uff0c\u4e0d\u8fc7\u524d\u7aef\u4e5f\u8981\u4f1a\u5199\u76f8\u5e94\u9012\u5f52\u51fd\u6570<\/p>\n<\/blockquote>\n<p>\u4e5f\u5c31\u662f\u76f8\u5f53\u4e8e\u8fd9\u6837\u7684<code>JSON<\/code><\/p>\n<pre><code class=\"js\">[\n        {\n                &quot;pid&quot;: 0,\n                &quot;id&quot;: 1,\n                &quot;name&quot;: &quot;\u4e2d\u56fd&quot;,\n        },\n        {\n                &quot;pid&quot;: 1,\n                &quot;id&quot;: 3,\n                &quot;name&quot;: &quot;\u5317\u4eac&quot;,\n        },\n        {\n                &quot;pid&quot;: 1,\n                &quot;id&quot;: 4,\n                &quot;name&quot;: &quot;\u4e0a\u6d77&quot;,\n        },\n        {\n                &quot;pid&quot;: 4,\n                &quot;id&quot;: 6,\n                &quot;name&quot;: &quot;\u6d66\u4e1c\u65b0\u533a&quot;,\n        },\n        {\n                &quot;pid&quot;: 0,\n                &quot;id&quot;: 2,\n                &quot;name&quot;: &quot;\u7f8e\u56fd&quot;,\n        },\n        {\n                &quot;pid&quot;: 2,\n                &quot;id&quot;: 5,\n                &quot;name&quot;: &quot;\u7ebd\u7ea6&quot;,\n        }\n]<\/code><\/pre>\n<p>\u81f3\u4e8e\u6811\u7ed3\u6784\u5982\u4f55\u62cd\u5e73\u7684\uff0c\u53ef\u4ee5\u7b14\u8005\u5199\u4e86\u4e24\u4e2a\u9012\u5f52\u51fd\u6570\u5927\u5bb6\u53ef\u4ee5\u770b\u770b\uff0c\u51fd\u6570\u5199\u6cd5\u4e8c\u7684\u53ef\u8bfb\u6027\u66f4\u597d\u4e00\u4e9b\u54e6<\/p>\n<p>\u51fd\u6570\u5199\u6cd5\u4e00\uff1a<\/p>\n<pre><code class=\"js\">\/\/ \u62cd\u5e73\u52a0pid\u5b57\u6bb5                 \nfunction pidFn(data, sqlArr = [], pid = 0) { \/\/ \u5047\u8bbe\u9876\u7ea7\u7684pid\u4e3a0\n        data.forEach((item) =&gt; { \/\/ \u904d\u5386\u5f97\u5230\u6bcf\u4e00\u9879\n                let obj = JSON.parse(JSON.stringify(item)) \/\/ \u6df1\u62f7\u8d1d\u4e00\u4efd\n                obj.pid = pid \/\/ \u7ed9\u6bcf\u4e00\u9879\u90fd\u8d4b\u503cpid\n                delete obj.children \/\/ \u62cd\u5e73\u4e0d\u9700\u8981children\n                sqlArr.push(obj) \/\/ \u4e22\u5230sqlArr\u6570\u7ec4\u4e2d\n                if (item.children) { \/\/ \u6709\u5b50\u8282\u70b9\u5c31\u9012\u5f52\u64cd\u4f5c\n                        pidFn(item.children, sqlArr, item.id) \/\/ \u5f53\u524d\u9879\u7684id\u5c31\u662f\u5b50\u9879\u7684pid\n                }\n        })\n        return sqlArr \/\/ \u4e00\u6ce2\u64cd\u4f5c\uff0c\u6700\u540e\u518d\u4e22\u51fa\u6765\u5373\u53ef\n}\nlet res = pidFn(treeData)\nconsole.log('\u62cd\u5e73\u52a0\u7236id\u5b57\u6bb5', res);<\/code><\/pre>\n<p>\u51fd\u6570\u5199\u6cd5\u4e8c\uff1a<\/p>\n<pre><code class=\"js\">function pidFn(data) {\n    let sqlArr = [] \/\/ \u5b9a\u4e49\u4e00\u4e2a\u6570\u7ec4\u7528\u4e8e\u5b58\u50a8\u62cd\u5e73\u540e\u7684\u6570\u636e\n    function digui(data, pid) { \/\/ \u4e13\u95e8\u5b9a\u4e49\u4e2a\u9012\u5f52\u51fd\u6570\u7528\u6237\u6e05\u6670\u7684\u5b58\u50a8\u6570\u636e\n            data.forEach((item) =&gt; { \/\/ \u904d\u5386\u6811\u7ed3\u6784\u6570\u636e\n                    let obj = JSON.parse(JSON.stringify(item)) \/\/ \u6df1\u62f7\u8d1d\u4e00\u4efd\n                    obj.pid = pid \/\/ \u7ed9\u6bcf\u4e00\u9879\u90fd\u8d4b\u503cpid\n                    delete obj.children \/\/ \u62cd\u5e73\u4e86\uff0c\u5c31\u4e0d\u9700\u8981children\u4e86\n                    sqlArr.push(obj) \/\/ \u4e22\u5230sqlArr\u6570\u7ec4\u4e2d\n                    if (item.children) { \/\/ \u5982\u679c\u6811\u7ed3\u6784\u6709\u5b50\u8282\u70b9\u5c31\u7ee7\u7eed\u9012\u5f52\u64cd\u4f5c\n                            \/\/ \u5f53\u524d\u8282\u70b9\u7684id\u5c31\u662f\u5b50\u8282\u70b9\u7684pid\n                            digui(item.children, item.id) \/\/ \u9012\u5f52\u51fd\u6570\u63a5\u6536\u6811\u7ed3\u6784\u6570\u636e\uff0c\u4ee5\u540epid\u53c2\u6570\n                    }\n            })\n    }\n    digui(data, 0) \/\/ \u9012\u5f52\u51fd\u6570\u521d\u6b21\u6267\u884c\uff0c\u5047\u8bbe\u9876\u7ea7pid\u662f0\n    return sqlArr \/\/ \u5c06\u9012\u5f52\u7684\u7ed3\u679c\u4e22\u51fa\u53bb\n}\n\nlet res = pidFn(treeData)\nconsole.log('\u62cd\u5e73\u52a0\u7236id\u5b57\u6bb5', res);<\/code><\/pre>\n<h4>1.3<code>pids<\/code>\u5b57\u6bb5<\/h4>\n<p><code>pids<\/code>\u5b57\u6bb5\u662f\u6240\u6709\u7684\u7236\u7ea7\u8282\u70b9\u7684\u7ec4\u5408\u7684\u6570\u7ec4\uff0c\u6bd4\u5982\u4e00\u4e2a\u4e09\u7ea7\u8282\u70b9\uff0c\u5b83\u7684<code>pid<\/code>\u662f\u4e8c\u7ea7\u8282\u70b9\u7684<code>id<\/code>\uff0c\u800c\u5b83\u7684<code>pids<\/code>\u662f\u6240\u6709\u7684\u7236\u7ea7\u8282\u70b9\uff0c\u5305\u62ec\u4e8c\u7ea7\u8282\u70b9<code>id<\/code>\u548c\u4e00\u7ea7\u8282\u70b9<code>id<\/code>\u3002<\/p>\n<blockquote><p>\u5f53\u7136\u6570\u636e\u5e93\u5b58\u50a8\uff0c\u4e0d\u80fd\u76f4\u63a5\u5b58\u4e00\u4e2a\u6570\u7ec4\u8fdb\u53bb\uff0c\u6240\u4ee5<code>toString()<\/code>\u8f6c\u6210\u5b57\u7b26\u4e32\u5b58\u50a8\u5373\u53ef<\/p><\/blockquote>\n<h4>1.4<code>cUrl<\/code>\u5b57\u6bb5<\/h4>\n<p><code>cUrl<\/code>\u5373<code>componentUrl<\/code>\u7ec4\u4ef6\u7684\u5730\u5740\u7684\u610f\u601d\u3002\u5c31\u662f\u8def\u7531\u8868\u4e2d\u7528\u4e8e\u8bfb\u53d6\u7ec4\u4ef6\u7684<code>component<\/code>\u51fd\u6570\u3002\u6bd4\u5982\u6709\u4ee5\u4e0b\u4e00\u4e2a\u8def\u7531\u8868\uff1a<\/p>\n<pre><code class=\"js\">{\n    path: &quot;\/welcome&quot;,\n    name: &quot;welcome&quot;,\n    component: resolve =&gt; require([&quot;@\/views\/pages\/welcome.vue&quot;], resolve),\n},<\/code><\/pre>\n<p>\u5728\u6570\u636e\u5e93\u4e2d\u5b58\u50a8\u4e3a\uff1a<\/p>\n<table>\n<thead>\n<tr>\n<th>url<\/th>\n<th>cUrl<\/th>\n<th>&#8230;<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\/welcome<\/td>\n<td>\/pages\/welcome.vue<\/td>\n<td>&#8230;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8868\u793a\uff1a\u5f53\u5730\u5740\u680f\u7684<code>url<\/code>\u503c\u4e3a<code>\/welcome<\/code>\u65f6\uff0c\u53bb\u8bfb\u53d6\u5e76\u6e32\u67d3<code>@\/views\/pages\/welcome.vue<\/code>\u6587\u4ef6\uff0c\u5373\u505a\u5230\u4e86<code>url<\/code>\u548c<code>\u9875\u9762<\/code>\u7684\u5bf9\u5e94\u5173\u7cfb<\/p>\n<blockquote><p>\u5176\u4ed6\u7684\u5b57\u6bb5\u542b\u4e49\uff0c\u770b\u4e0a\u8ff0\u56fe\u7247\u7684\u6ce8\u91ca\u5373\u53ef\u7406\u89e3<\/p><\/blockquote>\n<h4>1.5\u83dc\u5355\u8868sql\u4ee3\u7801<\/h4>\n<pre><code class=\"sql\">DROP TABLE IF EXISTS `menus`;\nCREATE TABLE `menus`  (\n  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '\u552f\u4e00id',\n  `pid` int(11) NOT NULL COMMENT '\u4e0a\u7ea7\u7236\u8282\u70b9\u7684id\uff0c\u5373\u4e3aparentId\uff08\u6ce8\u610f\uff0cchildren\u5b57\u6bb5\u662f\u4e0d\u7528\u5b58\u50a8\uff0cchildren\u5b57\u6bb5\u662f\u9012\u5f52\u65f6\uff0c\u6dfb\u52a0\u8fdb\u53bb\u7684\uff09',\n  `pids` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '\u4e0a\u7ea7\u8282\u70b9\u7684id\u6570\u7ec4\u8f6c\u7684\u5b57\u7b26\u4e32',\n  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '\u6811\u8282\u70b9\u7684\u540d\u5b57',\n  `url` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '\u5373\u4e3a\u83dc\u5355\u7684path',\n  `cUrl` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '\u5f53\u8bbf\u95eeurl\u65f6\uff0c\u524d\u7aef\u8def\u7531\u9700\u8981\u8bfb\u53d6\u5e76\u6e32\u67d3\u7684.vue\u6587\u4ef6\u7684\u8def\u5f84\uff0c\u4e00\u822c\u662f\u76f8\u5bf9\u4e8eviews\u91cc\u7684',\n  `type` int(255) NULL DEFAULT NULL COMMENT 'type\u4e3a1\u662f\u83dc\u5355\uff0c\u4e3a2\u662f\u6309\u94ae',\n  `icon` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '\u83dc\u5355\u7684\u56fe\u6807\u540d',\n  `sort` int(255) NULL DEFAULT NULL COMMENT '\u83dc\u5355\u7684\u4e0a\u4e0b\u6392\u5e8f',\n  `status` int(255) NULL DEFAULT NULL COMMENT '\u662f\u5426\u5f00\u542f\u5b57\u6bb5\uff0c1\u662f\u5f00\u542f\uff0c2\u662f\u5173\u95ed',\n  `isHidden` int(255) NULL DEFAULT NULL COMMENT '\u662f\u5426\u9690\u85cf\u83dc\u5355\uff0c1\u662f\u663e\u793a\uff0c2\u662f\u9690\u85cf',\n  `isCache` int(255) NULL DEFAULT NULL COMMENT '\u662f\u5426\u7f13\u5b58\uff0c1\u662f\u7f13\u5b58\uff0c2\u662f\u4e0d\u7f13\u5b58',\n  `remark` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '\u5907\u6ce8',\n  `isDel` int(255) NULL DEFAULT 1 COMMENT '\u5220\u9664\u6807\u8bc6\uff0c1\u4ee3\u8868\u672a\u5220\u9664\u53ef\u7528\uff0c2\u4ee3\u8868\u5df2\u5220\u9664\u4e0d\u53ef\u7528',\n  PRIMARY KEY (`id`) USING BTREE\n) ENGINE = InnoDB AUTO_INCREMENT = 105 CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Compact;<\/code><\/pre>\n<h3>2. \u89d2\u8272\u8868<\/h3>\n<h4>2.1\u89d2\u8272\u8868\u6570\u636e\u5e93\u622a\u56fe<\/h4>\n<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc50ab\" alt=\"\" title=\"\" loading=\"lazy\"><\/p>\n<h4>2.2menuIds\u5b57\u6bb5<\/h4>\n<p>\u5b9e\u9645\u9879\u76ee\u4e2d\uff0c\u4f1a\u6709\u4e00\u4e2a<code>\u89d2\u8272\u83dc\u5355\u8868<\/code>\u7528\u4e8e\u505a\u89d2\u8272\u548c\u83dc\u5355\u7684\u6620\u5c04\u5173\u7cfb\uff0c\u8fd9\u91cc\u7b14\u8005\u76f4\u63a5\u7cc5\u5728\u4e00\u5757\u4e86\uff0c\u4fbf\u4e8e\u5927\u5bb6\u7406\u89e3\u3002<\/p>\n<h4>2.3\u89d2\u8272\u8868sql\u4ee3\u7801<\/h4>\n<pre><code class=\"sql\">DROP TABLE IF EXISTS `roles`;\nCREATE TABLE `roles`  (\n  `roleId` int(255) NOT NULL AUTO_INCREMENT COMMENT '\u6bcf\u4e00\u4e2a\u89d2\u8272\u7684id',\n  `roleName` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '\u6bcf\u4e00\u4e2a\u89d2\u8272\u7684name\u540d\u5b57',\n  `roleRemark` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL DEFAULT NULL COMMENT '\u89d2\u8272\u7684\u5907\u6ce8',\n  `menuIds` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NULL COMMENT '\u5f53\u524d\u7684\u8fd9\u4e2a\u89d2\u8272\u80fd\u770b\u5230\uff08\u52fe\u9009\uff09\u7684\u83dc\u5355\u7684id\uff08\u7ed9\u89d2\u8272\u8d4b\u4e88\u83dc\u5355\uff09',\n  PRIMARY KEY (`roleId`) USING BTREE\n) ENGINE = InnoDB AUTO_INCREMENT = 32 CHARACTER SET = utf8 COLLATE = utf8_unicode_ci ROW_FORMAT = Compact;<\/code><\/pre>\n<h2>\u524d\u7aef\u4f7f\u7528\u89d2\u8272\u53bb\u767b\u5f55\u63a7\u5236\u9875\u9762\u7684\u6743\u9650<\/h2>\n<h3>1. \u767b\u5f55\u9875\uff08\u9009\u62e9\u89d2\u8272\u53d1\u8bf7\u6c42\u83b7\u53d6\u5bf9\u5e94\u83dc\u5355\u6811\u6570\u636e\uff09<\/h3>\n<h4>1.1\u6548\u679c\u56fe<\/h4>\n<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc50ad\" alt=\"\" title=\"\" loading=\"lazy\"><\/p>\n<h4>1.2\u4ee3\u7801\u601d\u8def<\/h4>\n<p><code>el-select<\/code>\u70b9\u51fb\u4e0b\u62c9\u6846<\/p>\n<pre><code class=\"html\">&lt;el-select\nv-model=&quot;value&quot;\nplaceholder=&quot;\u8bf7\u9009\u62e9\u89d2\u8272\u767b\u5f55&quot;\n@visible-change=&quot;\n  (flag) =&gt; {\n    if (flag) {\n      listRoles();\n    }\n  }\n&quot;\n&gt;\n    &lt;el-option\n      v-for=&quot;item in roleList&quot;\n      :key=&quot;item.value&quot;\n      :label=&quot;item.roleName + ' (' + item.roleRemark + ')'&quot;\n      :value=&quot;item.menuIds&quot;\n    &gt;\n    &lt;\/el-option&gt;\n&lt;\/el-select&gt;<\/code><\/pre>\n<p>\u53d1\u8bf7\u6c42\u83b7\u53d6\u89d2\u8272\u5217\u8868\u6709\u54ea\u4e9b<\/p>\n<pre><code class=\"js\">async listRoles() {\n  const res = await this.$auth.listRoles();\n  if (res.code == 0) {\n    this.roleList = res.data;\n  }\n}<\/code><\/pre>\n<p>\u63a5\u53e3\u8fd4\u56de\u89d2\u8272\u5217\u8868\u6709\u4ee5\u4e0b\u6570\u636e<\/p>\n<pre><code class=\"js\">[\n    {\n        &quot;roleId&quot;: 29,\n        &quot;roleName&quot;: &quot;\u8d85\u7ea7\u7ba1\u7406\u5458&quot;,\n        &quot;roleRemark&quot;: &quot;\u80fd\u770b\u5230\u6240\u6709&quot;,\n        &quot;menuIds&quot;: &quot;1,19,21,42,30,31,41,22,32,33,27,34,39,40,35,36,37,38,100,101,99,25,26&quot;\n    },\n    {\n        &quot;roleId&quot;: 30,\n        &quot;roleName&quot;: &quot;\u524d\u7aef&quot;,\n        &quot;roleRemark&quot;: &quot;\u53ea\u80fd\u770b\u524d\u7aef\u76f8\u5173&quot;,\n        &quot;menuIds&quot;: &quot;1,19,21,42,30,31,41,22,32,33,27,34,39,40,35&quot;\n    },\n    {\n        &quot;roleId&quot;: 31,\n        &quot;roleName&quot;: &quot;\u540e\u7aef&quot;,\n        &quot;roleRemark&quot;: &quot;\u53ea\u80fd\u770b\u540e\u7aef\u76f8\u5173&quot;,\n        &quot;menuIds&quot;: &quot;1,36,37,38,100,101&quot;\n    }\n]<\/code><\/pre>\n<p>\u5f53\u6211\u4eec\u9009\u62e9\u4ee5\u8d85\u7ea7\u7ba1\u7406\u5458\u767b\u5f55\u65f6\uff0c\u5c31\u6839\u636e\u8d85\u7ea7\u7ba1\u7406\u5458<code>roleId\u4e3a29<\/code>\u5bf9\u5e94\u7684\u80fd\u770b\u5230\u7684<code>menuIds<\/code>\u6709\u54ea\u4e9b\u7684\u83dc\u5355\uff0c\u53bb\u67e5\u8be2\u5bf9\u5e94\u7684\u83dc\u5355\u6570\u636e\u3002<\/p>\n<pre><code class=\"js\">\/auth\/roleMenuByMenuId?menuIds=1,19,21,42,30,31,41,22,32,33,27,34,39,40,35,36,37,38,100,101,99,25,26<\/code><\/pre>\n<p>\u540e\u7aef\u63a5\u53e3\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"js\">\/\/ \u6839\u636e\u89d2\u8272id\u67e5\u8be2\u80fd\u770b\u5230\u7684\u83dc\u5355\u6709\u54ea\u4e9b\uff08\u524d\u63d0\u662f\u8fd9\u4e9b\u83dc\u5355\u662f\u542f\u7528\u72b6\u6001\u7684\uff09\nroute.get('\/roleMenuByMenuId', (req, res) =&gt; {\n  \/\/ 1. \u63a5\u6536\u524d\u7aef\u4f20\u7684\u53c2\u6570\n  let menuIds = req.query.menuIds \n  \/\/ 2. \u62fc\u63a5sql\u8bed\u53e5\u51c6\u5907\u53bb\u6570\u636e\u5e93\u67e5\u8be2\n  let sql = `SELECT * FROM menus WHERE id IN (${menuIds}) AND isDel = 1 AND status = 1`\n  \/\/ \u6570\u636e\u5e93\u8fde\u63a5\u6c60\u5efa\u7acb\u8fde\u63a5\u53bb\u6570\u636e\u5e93\u4e2d\u635e\u6570\u636e\n  pool.getConnection(function (err, connection) {\n    if (err) { throw err }\n    connection.query(sql, function (error, results, fields) {\n      connection.release()\n      let apiRes = {\n        code: 0,\n        msg: &quot;\u6210\u529f&quot;,\n        \/\/ \u6ce8\u610f\uff01\u6ce8\u610f\uff01\u6ce8\u610f\uff01\n        \/\/ \u8fd9\u65f6\u5019\u635e\u5230\u7684\u6570\u636e\u8fd8\u662f\u6241\u5e73\u5316\u7684\u6570\u7ec4\n        \/\/ \u9700\u8981\u5c06\u6241\u5e73\u5316\u7684\u6570\u7ec4\u8f6c\u6210\u6811\u7ed3\u6784\n        \/\/ \u6240\u4ee5\u8fd9\u91cc\u5b9a\u4e49\u4e86\u4e00\u4e2achangeTree\u51fd\u6570\u7528\u4e8e\u52a0\u5de5\u6570\u636e\n        data: changeTree(results, 0, 0) \n      }\n      res.send(apiRes)\n    })\n  })\n})<\/code><\/pre>\n<blockquote><p>\u5982\u679c\u5927\u5bb6\u5bf9\u4e8eexpress\u5199\u63a5\u53e3\uff0c\u505a\u6570\u636e\u5e93\u67e5\u8be2\u5fd8\u4e86\uff0c\u53ef\u4ee5\u770b\u4e0b\u7b14\u8005\u4e4b\u524d\u5199\u7684\u4e00\u7bc7\u5168\u6808\u6587\u7ae0\u590d\u4e60\u4e00\u4e0b\u9057\u5fd8\u7684\u77e5\u8bc6\uff1a<a href=\"https:\/\/segmentfault.com\/a\/1190000040672270\">https:\/\/segmentfault.com\/a\/11&#8230;<\/a><\/p><\/blockquote>\n<p>\u6253\u5370\u67e5\u5230\u7684<code>results<\/code>\u7ed3\u679c\uff1a\u6241\u5e73\u5316\u6570\u7ec4\u6570\u636e\u622a\u56fe\uff1a<\/p>\n<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc50ae\" alt=\"\" title=\"\" loading=\"lazy\"><\/p>\n<p>\u6240\u4ee5\u9700\u8981\u6709\u4e2a\u51fd\u6570\u65b9\u6cd5\uff08\u5de5\u5177\u7c7b\uff09\uff0c\u80fd\u591f\u5c06\u6241\u5e73\u5316\u7ed3\u6784\u8f6c\u6210\u6811\u7ed3\u6784\uff0c\u51fd\u6570\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"js\">\/**\n * \u60f3\u8981\u5c06\u6241\u5e73\u5316\u6570\u7ec4\u8f6c\u6210\u6811\u7ed3\u6784\uff0c\u9996\u5148\u5fc5\u987b\u77e5\u9053\u9876\u7ea7\u7684pid\u662f\u5565\uff080\uff09\n * \u7b2c\u4e00\u6b65\uff0c\u5047\u8bbe\u6211\u4eec\u53ea\u9700\u8981\u627e\u9876\u7ea7\u7684\u8fd9\u4e00\u9879\uff0c\n * \u53ea\u9700\u8981\u5bf9\u6bd4\u4e00\u4e0b\u90a3\u4e00\u9879\u7684pid\u662f\u8fd9\u4e2apid\u5373\u53ef\n * \u800c\u540e\u9012\u5f52\u5373\u53ef\n * *\/\n\/\/ \u901a\u8fc7pid\u5c06\u6241\u5e73\u5316\u7684\u6570\u7ec4\u8f6c\u6210\u6811\u7ed3\u6784\u3002\u7ed9\u6811\u7ed3\u6784\u6dfb\u52a0level\u5b57\u6bb5\uff08\u6570\u636e\u5e93\u4e2d\u6ca1\u5b58\uff0c\u5f53\u7136\u5b58\u4e5f\u53ef\u4ee5\uff09\nmodule.exports = function changeTree(arr, pid, level) {\n    let treeArr = []\n    level = level + 1 \/\/ \u6dfb\u52a0\u5c42\u7ea7\u5b57\u6bb5\n    arr.forEach((item, index) =&gt; {\n        if (item.pid == pid) {\n            \/\/ \u628a\u4e0d\u662f\u8fd9\u4e00\u9879\u7684\u5269\u4f59\u51e0\u9879\uff0c\u90fd\u4e22\u5230\u8fd9\u4e2achildren\u6570\u7ec4\u91cc\u9762\uff0c\u518d\u8fdb\u884c\u9012\u5f52\uff08\u8fd9\u4e00\u9879\u5df2\u7ecf\u786e\u5b9a\u4e86\uff0c\u662f\u7236\u7ea7\uff0c\u6ca1\u5fc5\u8981\u518d\u9012\u5f52\u4e86\uff09\n            let restArr = arr.filter((item, index) =&gt; { return item.pid != pid })\n            item['children'] = changeTree(restArr, item.id, level) \/\/ \u8fd9\u91cc\u9700\u8981\u8fdb\u884c\u4f20id\u5f53\u505apid\uff08\u56e0\u4e3a\u81ea\u5df1\u7684id\u5c31\u662f\u5b50\u8282\u70b9\u7684pid\uff09\n            if (item.children.length == 0) { delete item.children } \/\/ \u52a0\u4e00\u4e2a\u5224\u65ad\uff0c\u82e5\u662fchildren: [] \u5373\u6ca1\u6709\u5185\u5bb9\u5c31\u5220\u9664\uff0c\u4e0d\u8fd4\u56de\u7ed9\u524d\u7aefchildren\u5b57\u6bb5\n            item['level'] = level \/\/ \u6dfb\u52a0\u5c42\u7ea7\u5b57\u6bb5\n            \/\/ \u64cd\u4f5c\u5b8c\u4ee5\u540e\uff0c\u628a\u4e00\u6574\u4e2a\u7684\u90fd\u8ffd\u52a0\u5230\u6570\u7ec4\u4e2d\u53bb\n            treeArr.push(item)\n        }\n    });\n    return treeArr\n}<\/code><\/pre>\n<p>\u8c03\u7528\uff1a<code>changeTree(results, 0, 0)<\/code> \u8fd9\u91cc\u8981\u544a\u77e5\u9876\u7ea7\u7684<code>pid<\/code>\uff0c\u8fd9\u91cc\u6211\u5047\u8bbe\u4e3a<code>0<\/code>\uff0c\u540c\u65f6<code>level<\/code>\u5c42\u7ea7\u4ece<code>\u7b2c0\u5c42<\/code>\u5f00\u59cb<\/p>\n<p>\u7ecf\u8fc7\u8fd9\u6837\u4e00\u52a0\u5de5\u518d\u8fd4\u56de\u7ed9\u524d\u7aef\uff0c\u5c31\u662f\u4e00\u4e2a\u6811\u7ed3\u6784\u7684\u6570\u636e\u4e86\uff0c\u5982\u4e0b\u56fe\uff1a<\/p>\n<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc50ag\" alt=\"\" title=\"\" loading=\"lazy\"><\/p>\n<p>\u8fd9\u6837\u7684\u8bdd\uff0c\u524d\u7aef\u5c31\u53ef\u4ee5\u4f7f\u7528\u4e86<\/p>\n<blockquote><p>\u56e0\u4e3a\u4e1a\u52a1\u7b80\u5355\uff0c\u6240\u4ee5\u8fd9\u91cc\u7b14\u8005\u7684\u540e\u7aefexpress\u6ca1\u6709\u5206\u5c42\u5904\u7406<\/p><\/blockquote>\n<p>\u5173\u4e8e\u540e\u7aef\u7684\u5206\u5c42\uff0c\u524d\u7aef\u540c\u4e8b\u53ef\u4ee5\u8fd9\u6837\u7b80\u5355\u7406\u89e3\uff1a<\/p>\n<pre><code class=\"js\">\u63a7\u5236\u5c42\n    \u63a5\u6536\u53c2\u6570\n    \u6821\u9a8c\u53c2\u6570\n    \u5904\u7406\u53c2\u6570\n    .....\n\u4e1a\u52a1\u5c42 \n    \u6570\u636e\u5904\u7406\u67e5\u3001\u6539\u4ec0\u4e48\u7684...\n\u6301\u4e45\u5c42\n    \u751f\u6210sql\u8bed\u53e5\n    \u6570\u636e\u5e93\u64cd\u4f5c\n    \u6570\u636e\u8fd4\u56de<\/code><\/pre>\n<h3>2.\u52a0\u5de5\u540e\u7aef\u8fd4\u56de\u7684\u83dc\u5355\u6811\u6570\u636e\u5b58\u5728vuex\u4e2d\u4ee5\u4f9b\u4f7f\u7528<\/h3>\n<h4>2.1\u767b\u5f55\u6210\u529f\u8df3\u8f6c<\/h4>\n<pre><code class=\"js\">async loginIn() {\n  \/\/ vuex\u4e2d\u53d1\u76f8\u5e94\u7684\u8bf7\u6c42\n  const res = await this.$store.dispatch(&quot;menu\/tree_menu&quot;, this.value);\n  if (res.code == 0) {\n    \/\/ \u5b58\u4e00\u4efd\u767b\u5f55\u7684\u89d2\u8272\u540d\n    let i = this.roleList.findIndex((item) =&gt; {\n      return item.menuIds == this.value;\n    });\n    sessionStorage.setItem(&quot;username&quot;, this.roleList[i].roleName);\n    \/\/ \u7136\u540e\u767b\u5f55\u6210\u529f\u53bb\u8df3\u8f6c\n    this.$message({\n      type: &quot;success&quot;,\n      message: &quot;\u767b\u5f55\u6210\u529f&quot;,\n    });\n    this.$router.push({ path: &quot;\/&quot; });\n  }\n},<\/code><\/pre>\n<h4>2.2vuex\u4e2d\u7684\u64cd\u4f5c~el-menu\u9700\u8981\u7684\u83dc\u5355\u6811<\/h4>\n<ul>\n<li>\u6ce8\u610f\uff0c\u4e0a\u8ff0\u56fe\u4e2d\uff0c\u540e\u7aef\u662f\u8fd4\u56de\u4e86\u83dc\u5355\u6811\uff0c\u4f46\u662f\uff01\u4f46\u662f\uff01\u4f9d\u65e7\u662f\u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528\uff01<\/li>\n<li>\u539f\u56e0\u662f\u524d\u7aef\u8fd8\u9700\u8981\u518d\u8fdb\u884c\u4e00\u6b21\u52a0\u5de5\uff0c\u5c06\u83dc\u5355\u6811\u52a0\u5de5\u6210\u4e24\u4e2a\u6811\u7ed3\u6784\u7684\u6570\u636e<\/li>\n<li>\u4e00\u4e2a\u662f<code>menuTree: [], \/\/ el-menu\u9700\u8981\u7684\u83dc\u5355\u6811<\/code><\/li>\n<li>\u53e6\u4e00\u4e2a\u662f<code>routerTree: [] \/\/ vue-router\u9700\u8981\u7684\u8def\u7531\u6811<\/code><\/li>\n<li><code>el-menu<\/code>\u83dc\u5355\u6811\u9700\u8981\u7684<code>menuTree<\/code>\u7684\u503c\u662f\u4e0d\u5305\u542b\u6309\u94ae\u8282\u70b9\u7684\uff0c\u800c\u56e0\u4e3a\u6309\u94ae\u88ab\u5f53\u505a\u4e86\u7279\u6b8a\u7684\u9875\u9762\u8282\u70b9\uff0c\u6240\u4ee5\u8fd9\u91cc\u9700\u8981\u8fc7\u6ee4\u4e00\u4e0b<\/li>\n<li><code>vue-router<\/code>\u9700\u8981\u7684\u8def\u7531\u6811<code>routerTree<\/code>\u4e5f\u8981\u6839\u636e\u540e\u7aef\u8fd4\u56de\u7684\u83dc\u5355\u6811\u8fdb\u884c\u52a0\u5de5\uff0c\u52a0\u5de5\u6210\u5177\u6709<code>component<\/code>\u51fd\u6570\u5c5e\u6027\u503c\u7684\u8def\u7531\u6811\u6570\u636e<\/li>\n<\/ul>\n<p>\u6211\u4eec\u5148\u770b<code>el-menu<\/code>\u83dc\u5355\u6811\u9700\u8981\u7684<code>menuTree<\/code>\u6570\u636e\u7684\u52a0\u5de5\u51fd\u6570<\/p>\n<pre><code class=\"js\">\/\/ \u52a0\u5de5\u540e\u7aef\u8fd4\u7684\u6811\u7ed3\u6784\u6570\u636e \u662f\u7ed9\u83dc\u5355\u9012\u5f52\u7ec4\u4ef6el-menu\u4f7f\u7528\u7684\nexport function setElMenuTreeWithoutBtn(oldTree, newTree) {\n    oldTree.forEach((item) =&gt; {\n        let newTreeObj = {\n            ...item,\n            children: null\n        }\n        if (item.children) { \/\/ \u6709\u5b50\u96c6\u5185\u5bb9\uff0c\u4e14\u5b50\u96c6\u5185\u5bb9\u4e3a\u83dc\u5355type=1\u624d\u53bb\u9012\u5f52\uff08\u6309\u94aetype=2\u5c31\u4e0d\u8981\u4e86\uff0c\u8fd9\u6837\u5c31\u8fc7\u6ee4\u4e86...\uff09\n            if (item.children[0].type == 1) {\n                setElMenuTreeWithoutBtn(item.children, newTreeObj.children = [])\n            }\n        }\n        if (newTreeObj.children == null) { \/\/ \u4e3anull\u8bf4\u660e\u6ca1\u6709\u5b50\u96c6\uff0c\u6216\u8005\u5b50\u96c6\u90fd\u662f\u6309\u94ae\u88ab\u5ffd\u7565\u4e86\uff0c\u5220\u9664\u4e4b\n            delete newTreeObj.children\n        }\n        newTree.push(newTreeObj)\n    })\n    return newTree\n}<\/code><\/pre>\n<p>\u8c03\u7528\u6b64\u65b9\u6cd5\u662f\u5728<code>vuex<\/code>\u4e2d\u7684\u767b\u5f55\u903b\u8f91\u4e2d<\/p>\n<pre><code class=\"js\">const state = {\n    isCollapse: false,\n    menuTree: [], \/\/ el-menu\u9700\u8981\u7684\u83dc\u5355\u6811\n    routerTree: [] \/\/ vue-router\u9700\u8981\u7684\u8def\u7531\u6811\n};\n\nconst mutations = { ... }\n\nconst actions = {\n    \/\/ \u76f8\u5f53\u4e8elogin\u767b\u5f55\u63a5\u53e3\n    tree_menu({ commit, dispatch }, menuIds) {\n        return new Promise((resolve, reject) =&gt; {\n            roleMenuByMenuId(menuIds)\n            .then(\n                (res) =&gt; {\n                    let menuTree = res.data[0].children \/\/ \u9876\u7ea7\u8282\u70b9PC\u4e0d\u8981\n                    commit('TREE_MENU', setElMenuTreeWithoutBtn(menuTree, [])) \/\/ \u52a0\u5de5\u83dc\u5355\u6811\u7ed9\u5230el-menu\u7ec4\u4ef6\u4f7f\u7528\n                    commit('ROUTE_TREE', setRouterTree(menuTree, [])) \/\/ \u52a0\u5de5\u83dc\u5355\u6811\u7ed9\u5230\u8def\u7531\u8868\u4f7f\u7528\n                    sessionStorage.setItem(&quot;token&quot;, &quot;token&quot;); \/\/ \u6a21\u62dftoken\u5b58\u50a8\n                    sessionStorage.setItem(&quot;menuIds&quot;, menuIds); \/\/ \u5b58\u4e00\u4efd\u5f53\u524d\u89d2\u8272\u7684menuIds\n                    setBtnAuth(menuTree) \/\/ \u8bbe\u7f6e\u6309\u94ae\n                    resolve(res) \/\/ \u629b\u51fa\u53bb\u544a\u77e5\u7ed3\u679c\n                }\n            ).catch(...)\n        })\n    }\n}<\/code><\/pre>\n<p>\u6700\u7ec8\u52a0\u5de5\u597d\u7684<code>menuTree<\/code>\u6811\u7ed3\u6784\u6570\u636e\uff0c\u4f1a\u88ab<code>el-menu<\/code>\u7ec4\u4ef6\u4f7f\u7528\uff1a<\/p>\n<p>\u6ce8\u610f\uff0c<code>el-menu<\/code>\u7ec4\u4ef6\u653e\u5728\u89c6\u56fe\u5c42\u7ec4\u4ef6\u4e2d\uff1a<\/p>\n<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc50ak\" alt=\"\" title=\"\" loading=\"lazy\"><\/p>\n<p>\u8ba9\u6211\u4eec\u6765\u770b\u4e00\u4e0b<code>layout<\/code>\u6587\u4ef6\u5939\u4e2d\u7684<code>index.vue<\/code>\u7ec4\u4ef6\u662f\u5982\u4f55\u4f7f\u7528<code>menuTree<\/code>\u6570\u636e\u7684\u5427<\/p>\n<p><strong><code>layout--&gt;index.vue<\/code><\/strong><\/p>\n<pre><code class=\"html\">&lt;el-menu\n    ref=&quot;elMenu&quot;\n    :collapse=&quot;isCollapse&quot;\n    :default-active=&quot;activeIndex&quot;\n    class=&quot;elMenu&quot;\n    background-color=&quot;#333&quot;\n    text-color=&quot;#B0B0B2&quot;\n    active-text-color=&quot;#fff&quot;\n    :unique-opened=&quot;false&quot;\n    router\n    @select=&quot;menuSelect&quot;\n  &gt;\n    &lt;!-- \u666e\u901a\u83dc\u5355\uff08\u524d\u7aef\u5199\u6b7b\u56fa\u5b9a\uff0c\u5982\u9996\u9875\u3001\u6b22\u8fce\u9875\u7b49\uff09 --&gt;\n    &lt;el-menu-item index=&quot;\/&quot;&gt;\n      &lt;i class=&quot;el-icon-s-home&quot;&gt;&lt;\/i&gt;\n      &lt;span slot=&quot;title&quot;&gt;\u9996\u9875&lt;\/span&gt;\n    &lt;\/el-menu-item&gt;\n    &lt;!-- \u9012\u5f52\u52a8\u6001\u83dc\u5355\uff08\u540e\u7aef\u8fd4\u56de\uff0c\u4e0d\u540c\u89d2\u8272\u83dc\u5355\u4e0d\u4e00\u81f4\uff09 --&gt;\n    &lt;myitem :data=&quot;menuArr&quot;&gt;&lt;\/myitem&gt;\n  &lt;\/el-menu&gt;\n  \n  import myitem from &quot;.\/components\/myitem.vue&quot;;\n  components: { myitem }\n  data(){\n      return {\n          menuArr: this.$store.state.menu.menuTree\n      }\n  }<\/code><\/pre>\n<p>\u518d\u590d\u4e60\u4e00\u4e0b\u9012\u5f52\u7ec4\u4ef6<\/p>\n<p><strong><code>layout--&gt;components--&gt;myitem.vue<\/code><\/strong><\/p>\n<pre><code class=\"html\">&lt;template&gt;\n  &lt;div&gt;\n    &lt;template v-for=&quot;(item, index) in data&quot;&gt;\n      &lt;!-- isHidden\u503c\u7b49\u4e8e1\u624d\u53bb\u663e\u793a\uff0c\u7b49\u4e8e2\u9690\u85cf --&gt;\n      &lt;template v-if=&quot;item.isHidden == 1&quot;&gt;\n        &lt;!-- \u56e0\u4e3a\u6709\u5b50\u96c6\u548c\u65e0\u5b50\u96c6\u6e32\u67d3html\u6807\u7b7e\u4e0d\u4e00\u6837\uff0c\u6240\u4ee5\u8981\u5206\u4e3a\u4e24\u79cd\u60c5\u51b5\uff1a\u60c5\u51b5\u4e00\uff1a\u6709\u5b50\u96c6\u7684\u60c5\u51b5\uff1a--&gt;\n        &lt;template v-if=&quot;item.children&quot;&gt;\n          &lt;!-- \u6709\u5b50\u96c6\u53bb\u9012\u5f52\u663e\u793a --&gt;\n          &lt;el-submenu :key=&quot;index&quot; :index=&quot;item.url&quot;&gt;\n            &lt;template slot=&quot;title&quot;&gt;\n              &lt;i class=&quot;el-icon-platform-eleme&quot;&gt;&lt;\/i&gt;\n              &lt;span&gt;{{ item.name }}&lt;\/span&gt;\n            &lt;\/template&gt;\n            &lt;myitem :data=&quot;item.children&quot;&gt;&lt;\/myitem&gt;\n          &lt;\/el-submenu&gt;\n        &lt;\/template&gt;\n        &lt;!-- \u60c5\u51b5\u4e8c\uff1a\u6ca1\u5b50\u96c6\u7684\u60c5\u51b5 --&gt;\n        &lt;template v-else&gt;\n          &lt;!-- \u6ca1\u5b50\u96c6\u76f4\u63a5\u663e\u793a\u5185\u5bb9\u5373\u53ef --&gt;\n          &lt;el-menu-item :key=&quot;index&quot; :index=&quot;item.url&quot;&gt;\n            &lt;i class=&quot;el-icon-eleme&quot;&gt;&lt;\/i&gt;\n            &lt;span slot=&quot;title&quot;&gt;{{ item.name }}&lt;\/span&gt;\n          &lt;\/el-menu-item&gt;\n        &lt;\/template&gt;\n      &lt;\/template&gt;\n    &lt;\/template&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  name: &quot;myitem&quot;,\n  props: {\n    data: {\n      type: Array,\n      default: [],\n    },\n  },\n  \/\/ \u6ce8\u610f\uff1a \u5728template\u6807\u7b7e\u4e0a\u4f7f\u7528v-for\uff0c:key=&quot;index&quot;\u4e0d\u80fd\u5199\u5728template\u6807\u7b7e\u4e0a\uff0c\u56e0\u4e3a\u5176\u6807\u7b7e\u4e0d\u4f1a\u88ab\u6e32\u67d3\uff0c\u4f1a\u5f15\u8d77\u5faa\u73af\u9519\u8bef\n};\n&lt;\/script&gt;<\/code><\/pre>\n<blockquote><p>\u5173\u4e8e<code>\u7ec4\u4ef6\u7684name\u5c5e\u6027<\/code>\uff0c\u5176\u5b9e\u4e0d\u5199\u4e5f\u884c\uff0c\u4e0d\u8fc7\u5f53\u9700\u8981\u4f7f\u7528\u5230\u7ec4\u4ef6\u7684\u9012\u5f52\u81ea\u8c03\u7528\u6216\u4f7f\u7528<code>keep-alive\u7f13\u5b58\u7ec4\u4ef6<\/code>\u65f6\uff0c\u5c31\u5f97\u52a0\u4e0a\u4e86\u3002\u5f53\u7136\u4e5f\u6709\u522b\u7684\u65b9\u6848&#8230;<\/p><\/blockquote>\n<p>\u5230\u76ee\u524d\u4e3a\u6b62\uff0c\u83dc\u5355\u80fd\u591f\u663e\u793a\u4e86\uff0c\u4f46\u662f\u70b9\u51fb\u83dc\u5355\u5374\u662f\u7a7a\u767d\u9875\uff0c\u56e0\u4e3a\u5c11\u4e86\u8def\u7531\u8868\u6811\u7ed3\u6784\u6570\u636e\u4e86<\/p>\n<h4>2.3vuex\u4e2d\u7684\u64cd\u4f5c~vue-router\u9700\u8981\u7684\u8def\u7531\u6811<\/h4>\n<p>\u8def\u7531\u8868\u4e2d\u7684\u8def\u7531\u5206\u4e3a\u9759\u6001\u8def\u7531\uff08\u56fa\u5b9a\u8def\u7531\uff09\u548c\u52a8\u6001\u8def\u7531\uff08\u540e\u7aef\u6839\u636e\u4e0d\u540c\u7684\u7528\u6237\/\u89d2\u8272\u8fd4\u56de\u7684\u8def\u7531\uff09\uff0c\u6bd4\u5982\u53ef\u4ee5\u6709\u4ee5\u4e0b\u7684\u9759\u6001\u56fa\u5b9a\u8def\u7531\uff1a<\/p>\n<pre><code class=\"js\">\/\/ \u56fa\u5b9a\u7684\u9759\u6001\u8def\u7531\uff0c\u6bd4\u5982\u767b\u5f55\u9875\u3001\u9996\u9875\u3001404\u9875\u7b49...\nconst staticRoutes = [\n  {\n    path: '\/',\n    \/\/ component: resolve =&gt; require([&quot;@\/layout\/index.vue&quot;], resolve),\n    component: Layout, \/\/ \u4e8c\u8005\u4e00\u4e2a\u610f\u601d\n    redirect: '\/home',\n    children: [\n      {\n        path: &quot;\/home&quot;,\n        name: &quot;home&quot;,\n        component: resolve =&gt; require([&quot;@\/views\/home.vue&quot;], resolve),\n      },\n    ]\n  },\n  {\n    path: '\/login',\n    component: resolve =&gt; require([&quot;@\/views\/login.vue&quot;], resolve),\n  },\n  {\n    path: '\/404',\n    component: resolve =&gt; require([&quot;@\/views\/404.vue&quot;], resolve),\n  },\n  \/\/ { path: '*', redirect: '\/404' } \n]<\/code><\/pre>\n<blockquote><p>\u8fd9\u91cc\u6709\u4e00\u4e2a\u5751\uff0c<code>404\u9875\u9762\u7684\u5339\u914d\u515c\u5e95\u8def\u7531<\/code>\u5728\u6700\u540e\uff0c\u4f46\u662f\u4e0d\u80fd\u76f4\u63a5\u5199\u5728\u9759\u6001\u8def\u7531\u4e2d\u7684\u6700\u540e\u4e00\u4e2a\uff0c\u4f1a\u5237\u65b0\u81ea\u52a8\u5230404\u9875\u9762\u4e86\u3002\u56e0\u4e3a\u662f\u52a8\u6001\u8def\u7531\u7684\u505a\u6cd5\uff0c\u6240\u4ee5<code>404\u9875\u9762\u7684\u5339\u914d\u515c\u5e95\u8def\u7531<\/code>\u62fc\u63a5\u5728<code>vue-router<\/code>\u7684\u8def\u7531\u6811\u6570\u7ec4\u6570\u636e\u4e2d\u5373\u53ef\u3002\u6240\u4ee5\u4e0a\u8ff0\u7684<code>{ path: '*', redirect: '\/404' } <\/code>\u7b14\u8005\u6ce8\u91ca\u6389\u4e86\u3002<\/p><\/blockquote>\n<p>\u767b\u5f55\u83b7\u53d6\u5230\u540e\u7aef\u8fd4\u56de\u7684\u6811\u7ed3\u6784\u6570\u636e\u540e\uff0c\u52a0\u5de5\uff0c\u7ed9\u8def\u7531\u8868\u4f7f\u7528<\/p>\n<pre><code class=\"js\">\/\/ vuex\u4e2d\nroleMenuByMenuId(menuIds).then(\n    (res) =&gt; {\n        let menuTree = res.data[0].children \/\/ \u9876\u7ea7\u8282\u70b9PC\u4e0d\u8981\n        commit('ROUTE_TREE', setRouterTree(menuTree, []))\n    }\n)<\/code><\/pre>\n<p><code>setRouterTree<\/code>\u52a0\u5de5\u51fd\u6570<\/p>\n<pre><code class=\"js\">\/\/ \u52a0\u5de5\u540e\u7aef\u8fd4\u7684\u6811\u7ed3\u6784\u6570\u636e \u662f\u7ed9vue-router\u8def\u7531\u8868\u4f7f\u7528\nimport Layout from '@\/layout\/index.vue'\nlet page404 = { path: '*', redirect: '\/404' }\nexport function setRouterTree(oldTree, newTree) {\n    oldTree.forEach((item) =&gt; {\n        let newTreeObj = {\n            path: item.level == 2 ? `\/${item.url}` : `${item.url}`,\n            name: item.name,\n            component(resolve) { require([`@\/views${item.cUrl}`], resolve) },\n            meta: {\n                title: item.name\n            }\n        }\n        if (item.level == 2) { \/\/ \u5982\u679c\u662f\u4e8c\u7ea7\uff0c\u5c31\u7edf\u4e00\u4f7f\u7528layout\u7ec4\u4ef6\u89c6\u56fe\u5c42\n            \/\/ newTreeObj['component'] = Layout \/\/ \u8fd9\u4e24\u4e2a\u4e00\u4e2a\u610f\u601d\n            newTreeObj['component'] = (resolve) =&gt; {\n                require([&quot;@\/layout\/index.vue&quot;], resolve)\n            }\n        }\n        if (item.children) {\n            if (item.children[0].type == 1) { \/\/ \u8def\u7531\u8868\u6811\u7ed3\u6784\u4e5f\u4e0d\u9700\u8981\u6309\u94ae\u54e6\uff0c\u53ea\u8981type\u7b49\u4e8e1\u7684\u83dc\u5355\n                setRouterTree(item.children, newTreeObj.children = [])\n            }\n        }\n        newTree.push(newTreeObj)\n    });\n    return newTree.concat(page404) \/\/ \u5c06404\u9875\u9762\u62fc\u63a5\u5230\u6700\u540e\u9762\uff0c\u505a\u901a\u914d\u8def\u7531\u4f7f\u7528\n}<\/code><\/pre>\n<p>\u6253\u5370\u52a0\u5de5\u597d\u7684\u8def\u7531\u6811\u7ed3\u679c\uff1a<\/p>\n<p>\u6ce8\u610f\u7bad\u5934\u6307\u5411\u7684\u5730\u65b9\uff0c<code>component<\/code>\u51fd\u6570\u8981\u53bb\u5f15\u7528\u6307\u5411\u89e3\u6790\u7ec4\u4ef6\u54e6\uff0c\u8fd9\u4e2a\u4e00\u5b9a\u8981\u6709<\/p>\n<p><img decoding=\"async\" referrerpolicy=\"no-referrer\" src=\"https:\/\/segmentfault.com\/img\/bVc50al\" alt=\"\" title=\"\" loading=\"lazy\"><\/p>\n<p>\u6240\u4ee5<code>commit('ROUTE_TREE', setRouterTree(menuTree, []))<\/code>\u7684\u503c\u7ed9\u5230\u8def\u7531\u8868\u53bb\u4f7f\u7528<\/p>\n<p>\u90a3\u4e48\uff1f\u8def\u7531\u8868\u5982\u4f55\u4f7f\u7528\u52a0\u5de5\u597d\u7684\u8fd9\u4e2a\u8def\u7531\u8868\u6811\u6570\u636e\u5462\uff1f\u4f7f\u7528<code>vue<\/code>\u7684<code>addRoutes<\/code>\u65b9\u6cd5\u6dfb\u52a0\u5373\u53ef\uff0c\u5728\u767b\u5f55\u6210\u529f\u4ee5\u540e\u3002\u52a0\u5de5\u597d\u4ee5\u540e\uff0c\u76f4\u63a5\u6dfb\u52a0\u5373\u53ef<\/p>\n<pre><code class=\"js\">import router from &quot;@\/router&quot;;\nimport store from &quot;@\/store&quot;;\n\nasync loginIn() {\n      const res = await this.$store.dispatch(&quot;menu\/tree_menu&quot;, this.value);\n      if (res.code == 0) {\n        \/**\n         * \u767b\u5f55\u6210\u529f\u4ee5\u540e\u4e5f\u8981\u52a8\u6001\u6dfb\u52a0\u4e00\u4e0b\u8def\u7531tip1\uff0c\u6216\u8005\u5f02\u6b65\u91cd\u52a0\u8f7d\u4e00\u4e0btip2\n         * \u5426\u5219\u4f1a\u51fa\u73b0\u9996\u6b21\u767b\u5f55router.beforeEach\u4e2d\u52a8\u6001\u8def\u7531\u65b9\u6cd5\u4e0d\u89e6\u53d1\n         * \u5373\u9996\u6b21\u767b\u5f55\u70b9\u51fb\u52a8\u6001\u83dc\u5355\u90e8\u5206\u51fa\u73b0\u7a7a\u767d\u9875\uff08\u5237\u65b0\u540e\u6b63\u5e38\uff09\n         * *\/\n        router.addRoutes(store.state.menu.routerTree); \/\/ tip1: \u6ce8\u6389\u6548\u679c\u660e\u663e\n        let i = this.roleList.findIndex((item) =&gt; {\n          return item.menuIds == this.value;\n        });\n        sessionStorage.setItem(&quot;username&quot;, this.roleList[i].roleName);\n        this.$message({\n          type: &quot;success&quot;,\n          message: &quot;\u767b\u5f55\u6210\u529f&quot;,\n        });\n        this.$router.push({ path: &quot;\/&quot; });\n        \/\/ setTimeout(() =&gt; { \/\/ tip2:\u6ce8\u6389\u6548\u679c\u660e\u663e\n        \/\/   location.reload();\n        \/\/ }, 10);\n      }\n    },<\/code><\/pre>\n<p>\u6700\u540e\u4e00\u6b65\uff0c\u5237\u65b0\u9875\u9762\u65f6\uff0c<code>vuex<\/code>\u521d\u59cb\u5316\uff0c\u6240\u4ee5\u5728<code>beforeEach<\/code>\u94a9\u5b50\u51fd\u6570\u4e2d\u91cd\u65b0\u53d1\u8bf7\u6c42\uff0c\u83b7\u53d6\u83dc\u5355\u6811\u6570\u636e\u5373\u53ef<\/p>\n<pre><code class=\"js\">\/\/ \u8def\u7531\u5168\u5c40\u62e6\u622a\nrouter.beforeEach((to, from, next) =&gt; {\n  \/\/ \u53bb\u767b\u5f55\u9875\u9762\u80af\u5b9a\u653e\u884c\u7684\uff0c\u7ba1\u4ed6\u6709\u6ca1\u6709token\n  if (to.path === '\/login') {\n    next()\n  }\n  \/\/ \u53bb\u7684\u4e0d\u662f\u767b\u5f55\u9875\u9762\uff0c\u518d\u770b\u770b\u6709\u6ca1\u6709token\u8ba4\u8bc1\n  else {\n    const token = sessionStorage.getItem('token')\n    if (!token) { \/\/ \u6ca1token\uff0c\u5c31\u8ba9\u5176\u56de\u5230\u767b\u5f55\u9875\u767b\u5f55\n      next({ path: &quot;\/login&quot; })\n    } else { \/\/ \u6709token\uff0c\u518d\u770b\u770b\u6709\u6ca1\u6709\u83dc\u5355\u8def\u7531\u4fe1\u606f\n      if (store.state.menu.routerTree.length &gt; 0) { \/\/ \u6709\u83dc\u5355\u4fe1\u606f\uff0c\u5c31\u653e\u884c\n        next()\n      } else { \/\/ \u6ca1\u6709\u83dc\u5355\u4fe1\u606f\uff0c\u5c31\u518d\u53d1\u4e00\u6b21\u8bf7\u6c42\u83b7\u53d6\u83dc\u5355\u4fe1\u606f\n        let menuIds = sessionStorage.getItem('menuIds')\n        store.dispatch('menu\/tree_menu', menuIds).then((res) =&gt; {\n          if (res.code == 0) {\n            router.addRoutes(store.state.menu.routerTree)\n            next({ ...to, replace: true }) \/\/ \u786e\u4fdd\u52a8\u6001\u8def\u7531\u5df2\u88ab\u5b8c\u5168\u6dfb\u52a0\u8fdb\u53bb\u4e86\n          }\n        })\n      }\n    }\n  }\n})<\/code><\/pre>\n<h2>\u524d\u7aef\u4f7f\u7528\u89d2\u8272\u53bb\u767b\u5f55\u63a7\u5236\u6309\u94ae\u7684\u6743\u9650<\/h2>\n<p>\u6309\u94ae\u7684\u6743\u9650\u601d\u8def\uff0c\u5728\u767b\u5f55\u65f6\uff0c\u6839\u636e\u83dc\u5355\u6811\u8f6c\u6210\u4e00\u4e2a\u6309\u94ae\u6811\uff0c\u6709\u6309\u94ae\u7684\u6743\u9650\uff0c\u5c31\u4e3atrue\uff0c\u6ca1\u6709\u5c31\u76f4\u63a5\u6ca1\u6709\u3002<\/p>\n<p>\u7136\u540e\u518d\u5b9a\u4e49\u51fd\u6570\u53bb\u83b7\u53d6\u67d0\u67d0\u9875\u9762\u4e0b\u7684\u67d0\u67d0\u6309\u94ae\u7684\u503c\u662f\u5426\u4e3atrue\uff0c\u4e3atrue\u5c31\u8bf4\u660e\u6709\u6743\u9650\uff0c\u4e3afalse\u5c31\u8bf4\u660e\u6ca1\u6709\u6743\u9650\uff0c\u53ef\u4ee5\u4f7f\u7528\u51fd\u6570\u5f15\u5165\u65b9\u5f0f\uff0c\u6216\u8005\u81ea\u5b9a\u4e49\u6307\u4ee4\u65b9\u5f0f\u3002<\/p>\n<h3>\u5c06\u83dc\u5355\u6811\u7684\u6309\u94ae\u8f6c\u6210key\/value\u5e03\u5c14\u503c\u6309\u94ae\u6811\u5f62\u5f0f<\/h3>\n<h4>\u76ee\u6807\u6309\u94ae\u6811\u7ed3\u6784<\/h4>\n<pre><code class=\"js\">{\n    &quot;\u524d\u7aef\u6846\u67b6&quot;: {\n        &quot;vue\u9875\u9762&quot;: {\n            &quot;\u65b0\u589evue&quot;: true,\n            &quot;\u7f16\u8f91vue&quot;: true,\n            &quot;\u5220\u9664vue&quot;: true,\n            &quot;\u5360\u4f4d\u6309\u94ae&quot;: true\n        },\n        &quot;react\u9875\u9762&quot;: {\n            &quot;\u65b0\u589ereact&quot;: true,\n            &quot;\u7f16\u8f91react&quot;: true\n        },\n        &quot;angular&quot;: {\n            &quot;agl1&quot;: {\n                &quot;agl1\u65b0\u589e\/\u7f16\u8f91&quot;: true,\n                &quot;agl1\u5220\u9664&quot;: true\n            },\n            &quot;agl2&quot;: {}\n        }\n    },\n    &quot;\u540e\u7aef\u6846\u67b6&quot;: {\n        &quot;springBoot&quot;: {},\n        &quot;myBatis&quot;: {},\n        &quot;\u7279\u5de5001&quot;: {},\n        &quot;\u7279\u5de5002&quot;: {}\n    },\n    &quot;\u7cfb\u7edf\u8bbe\u7f6e&quot;: {\n        &quot;\u89d2\u8272\u7ba1\u7406&quot;: {},\n        &quot;\u83dc\u5355\u7ba1\u7406&quot;: {}\n    }\n}<\/code><\/pre>\n<h4>\u5b9a\u4e49\u51fd\u6570\u53bb\u8bbe\u7f6e<\/h4>\n<p>\u4f9d\u65e7\u662f\u5728\u767b\u5f55\u7684\u65f6\u5019\uff0c\u53bb\u6839\u636e\u83dc\u5355\u6811\u53bb\u8bbe\u7f6e\u6309\u94ae\u6811<\/p>\n<pre><code class=\"js\">roleMenuByMenuId(menuIds).then(\n        (res) =&gt; {\n            let menuTree = res.data[0].children \/\/ \u9876\u7ea7\u8282\u70b9PC\u4e0d\u8981\n            \/\/......\n            setBtnAuth(menuTree) \/\/ \u8bbe\u7f6e\u6309\u94ae\u6811\n            resolve(res) \/\/ \u629b\u51fa\u53bb\u544a\u77e5\u7ed3\u679c\n        }\n    )<\/code><\/pre>\n<h4>\u8bbe\u7f6e\u6309\u94ae\u6811\u9012\u5f52\u51fd\u6570<\/h4>\n<pre><code class=\"js\">\/\/ \u6309\u94ae\u6743\u9650\u8bbe\u7f6e\nexport function setBtnAuth(tree, btnAuthObj = {}) {\n    \/\/ \u5faa\u73af\u52a0\u5de5\n    tree.forEach((item) =&gt; {\n        if (item.type == 1) { \/\/ \u7c7b\u578b\u4e3a1\u8bf4\u660e\u662f\u83dc\u5355\n            btnAuthObj[item.name] = {} \/\/ \u83dc\u5355\u5c31\u52a0\u4e0a\u4e00\u4e2a\u5bf9\u8c61\u5c5e\u6027\n            if (item.children) { \/\/ \u82e5\u6709\u5b50\u96c6\uff0c\u5c31\u9012\u5f52\u52a0\u5bf9\u8c61\u5c5e\u6027\n                \/\/ \u56e0\u4e3a\u5bf9\u8c61\u662f\u5f15\u7528\u7c7b\u578b\uff0c\u6240\u4ee5\u76f4\u63a5\u8d4b\u503c\u6574\u4e2a\u6309\u94ae\u6743\u9650\u5bf9\u8c61\u5c31\u90fd\u6709\u4e86\n                setBtnAuth(item.children, btnAuthObj[item.name])\n            }\n        }\n        if (item.type == 2) { \/\/ \u7c7b\u578b\u4e3a2\u8bf4\u660e\u662f\u6309\u94ae\n            btnAuthObj[item.name] = true \/\/ \u6309\u94ae\u7684\u8d4b\u503ctrue\u8868\u793a\u6709\u6309\u94ae\u6743\u9650\n        }\n    })\n    \/\/ \u52a0\u5de5\u5b8c\u6bd5\u4ee5\u540e\uff0c\u4e22\u51fa\u53bb\u4ee5\u4f9b\u4f7f\u7528\n    sessionStorage.setItem('btnAuthObj', JSON.stringify(btnAuthObj))\n    return btnAuthObj\n}<\/code><\/pre>\n<h4>\u83b7\u53d6\u6309\u94ae\u6811\u9012\u5f52\u51fd\u6570<\/h4>\n<pre><code class=\"js\">\/\/ \u6309\u94ae\u6743\u9650\u83b7\u53d6\nexport function getBtnAuth(whichPage, btnName) { \/\/ \u67e5\u627e\uff1a\u90a3\u4e2a\u9875\u9762\u4e0b\u7684\u4ec0\u4e48\u6309\u94ae\u540d\u5b57\u662f\u5426\u6709\u6743\u9650\n    let flag \/\/ \u627e\u5230\u4e86\uff0c\u624d\u8bf4\u660e\u6709\u6743\u9650\n    function getBtn(whichPage, btnName, btnAuthObj = JSON.parse(sessionStorage.getItem('btnAuthObj'))) {\n        for (const key in btnAuthObj) {\n            if (key == whichPage) {\n                flag = btnAuthObj[key][btnName]\n            } else {\n                getBtn(whichPage, btnName, btnAuthObj[key])\n            }\n        }\n    }\n    getBtn(whichPage, btnName) \/\/ \u9012\u5f52\u67e5\u627e\u6807\u8bc6\u8d4b\u503c\n    return flag ? true : false \/\/ \u627e\u5230\u4e86\u4e3atrue\uff0c\u6ca1\u627e\u5230undefined\uff0c\u8fd9\u91cc\u518d\u5224\u65ad\u4e00\u4e0b\uff0c\u8fd4\u56de\u5e03\u5c14\u503c\n}<\/code><\/pre>\n<h4>\u51fd\u6570\u4f7f\u7528\u65b9\u5f0f<\/h4>\n<pre><code class=\"js\">&lt;el-button type=&quot;danger&quot; v-if=&quot;isShowDeleteBtn&quot;&gt;\u5220\u9664vue&lt;\/el-button&gt;\n\ncomputed: {\n    isShowDeleteBtn() {\n      return getBtnAuth(&quot;vue\u9875\u9762&quot;, &quot;\u5220\u9664vue&quot;);\n    },\n  },<\/code><\/pre>\n<h4>\u81ea\u5b9a\u4e49\u6307\u4ee4\u65b9\u5f0f<\/h4>\n<pre><code class=\"html\">&lt;el-button type=&quot;primary&quot; v-btn=&quot;{ vue\u9875\u9762: '\u65b0\u589evue' }&quot;&gt;\u65b0\u589evue&lt;\/el-button&gt;\n&lt;el-button type=&quot;primary&quot; v-btn=&quot;{ vue\u9875\u9762: '\u7f16\u8f91vue' }&quot;&gt;\u7f16\u8f91vue&lt;\/el-button&gt;<\/code><\/pre>\n<h4>\u81ea\u5b9a\u4e49\u6307\u4ee4v-btn<\/h4>\n<pre><code class=\"js\">import { getBtnAuth } from &quot;@\/utils&quot;;\nexport default {\n    inserted(el, binding, vnode) {\n        const whichPage = Object.keys(binding.value)[0]\n        const btnName = Object.values(binding.value)[0]\n        let flag = getBtnAuth(whichPage, btnName)\n        if (!flag) {\n            el.parentNode.removeChild(el)\n        }\n    },\n    unbind(el, binding, vnode) {\n    }\n}<\/code><\/pre>\n<p>\u76f8\u5f53\u4e8e\u53bb\u67e5\u8be2\uff0c\u67e5 <code>\u67d0\u4e2a\u9875\u9762<\/code> \u4e2d\u6709\u6ca1\u6709 <code>\u67d0\u4e2a\u6309\u94ae<\/code><\/p>\n<h2>\u5171\u7528\u7684\u52a8\u6001\u8def\u7531\u7ec4\u4ef6<\/h2>\n<p>\u6bd4\u5982\u597d\u51e0\u4e2a\u9875\u9762\uff0c\u90fd\u662f\u540c\u4e00\u4e2a\u7ed3\u6784\u5185\u5bb9\uff0c\u53ea\u662fid\u4e0d\u540c\uff0c\u8fd9\u4e2a\u65f6\u5019\u5c31\u9700\u8981\u4f7f\u7528\u52a8\u6001\u8def\u7531\u7ec4\u4ef6\u4e86\u4f20\u53c2<\/p>\n<p><code>\/dynaOne\/:001<\/code><\/p>\n<pre><code class=\"html\">&lt;template&gt;\n  &lt;div&gt;\n    &lt;span&gt;\u5171\u7528\u7684\u52a8\u6001\u7ec4\u4ef6\uff1a&lt;\/span&gt;\n    &lt;h2&gt;\n      \u6839\u636e &lt;span class=&quot;val&quot;&gt;{{ val }}&lt;\/span&gt; \u7684\u4e0d\u540c\u53d1\u76f8\u5e94\u8bf7\u6c42\n    &lt;\/h2&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  data() {\n    return {\n      val: Object.values(this.$route.params)[0].slice(1),\n      \/*\n        \u6ce8\u610furl\u7684\u914d\u7f6e\uff1a\n        \u601d\u8def\u662f\u591a\u4e2a\u8def\u7531path\u4f7f\u7528\u540c\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u9700\u8981\u52a0\u4e0a\u76d1\u542c\uff0c\u89e3\u51b3\u8def\u7531\u53d8\u4e86\uff0c\u7ec4\u4ef6\u4e0d\u5237\u65b0\u7684\u95ee\u9898\n            \u8eab\u4efd\u6807\u8bc6id\u76f4\u63a5url\u4e2d\u62fc\u63a5\u5373\u53ef\u4f7f\u7528\n            url:'xxx\/:001'\n      *\/\n    };\n  },\n  watch: {\n    $route: {\n      handler: function () {\n        this.val = Object.values(this.$route.params)[0].slice(1);\n      },\n    },\n  },\n};\n&lt;\/script&gt;\n\n&lt;style&gt;\n.val {\n  color: brown;\n  font-size: 36px;\n  margin: 0 8px;\n}\n&lt;\/style&gt;<\/code><\/pre>\n<h2>\u603b\u7ed3<\/h2>\n<ul>\n<li>\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\uff0c\u5c31\u53ef\u4ee5\u505a\u5230\u52a8\u6001\u83dc\u5355\u5f97\u4e86\u3002<\/li>\n<li>\u4f46\u662f\u7eb8\u4e0a\u5f97\u6765\u7ec8\u89c9\u6d45\uff0c\u8fd8\u662f\u5f97\u5b9e\u64cd<\/li>\n<li>\u53c8\u56e0\u4e3a\u7bc7\u5e45\u539f\u56e0\uff0c\u7b14\u8005\u5173\u4e8e\u4e00\u4e9b\u7ec6\u8282\u6587\u7ae0\u4e2d\u6ca1\u6709\u63d0\u5230<\/li>\n<li>\u6240\u4ee5\u5927\u5bb6\u53ef\u4ee5\u53bb\u7b14\u8005\u53d1\u5e03\u51fa\u7684\u7f51\u7ad9\u4e0a\u770b\u6548\u679c<\/li>\n<li>\u4ee5\u53castar\u4e00\u4e0b\u7b14\u8005\u7684\u4ed3\u5e93<\/li>\n<li>\u5c06\u4ee3\u7801\u62c9\u4e0b\u6765\u8dd1\u8d77\u6765\uff0c\u4e00\u70b9\u70b9\u634b\u6e05\u4ee3\u7801\u601d\u8def<\/li>\n<li>\u8fd9\u6837\u5370\u8c61\u624d\u4f1a\u6df1\u523b<\/li>\n<\/ul>\n<blockquote>\n<p>\u6bd4\u5982\u540e\u7aef\u63a5\u53e3\u5982\u4f55\u5199\uff0c\u524d\u7aef\u83dc\u5355\u6811<code>el-tree<\/code>\u52fe\u9009\u4f20\u53c2\u7ec6\u8282\u95ee\u9898\uff0c\u8be6\u60c5\uff0c\u8bf7\u770b\u4ee3\u7801<\/p>\n<p>\u53e6\u5916\uff0c\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\uff0c\u90fd\u6709<code>tab<\/code>\u6807\u7b7e\u9875\uff0c\u52a8\u6001\u8def\u7531\u7684<code>tab\u6807\u7b7e\u9875<\/code>\u5728\u4e09\u5c42\u83dc\u5355\u4e2d\u4f1a\u51fa\u73b0<code>\u7f13\u5b58\u95ee\u9898<\/code>\uff0c\u540e\u7eed\u7b14\u8005\u4e0d\u5fd9\u4e86\uff0c\u4f1a\u7ee7\u7eed\u66f4\u65b0\u8fd9\u4e2a\u4ed3\u5e93\u7684\u54e6\u3002<\/p>\n<p>\u7b49\u7b49&#8230;<\/p>\n<\/blockquote>\n<p><strong>\u5927\u5bb6\u53ef\u4ee5\u968f\u610f\u65b0\u589e\u89d2\u8272\uff0c\u5e76\u8d4b\u4e88\u83dc\u5355\u6743\u9650\uff0c\u4e0d\u8fc7\u4e0d\u80fd\u7f16\u8f91\u83dc\u5355\u6570\u636e\u54e6\u3002\u7b14\u8005\u4e3a\u4e86\u964d\u4f4e\u81ea\u5df1\u7684\u6570\u636e\u4e0d\u88ab\u6253\u4e71\u4e86<\/strong><\/p>\n<p><strong>\u5982\u679c\u5e2e\u5230\u4e86\u60a8\uff0c\u8fd8\u8bf7\u8d4f\u8d50\u4e00\u4e2a<code>star<\/code>\uff0c\u4e5f\u662f\u54b1\u66f4\u6587\u7684\u52a8\u529b\u3002\uff08PS:\u5199\u6587\u7ae0\u771f\u7684\u8981\u82b1\u8d39\u4e0d\u5c11\u65f6\u95f4\u54e6\ud83d\ude2d\uff09<\/strong><\/p>\n<p><a href=\"https:\/\/segmentfault.com\/a\/1190000043337269\">https:\/\/segmentfault.com\/a\/1190000043337269<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u7565\u957f\uff0c\u5efa\u8bae\u6536\u85cf\u3002 \u7ebf\u4e0a\u7f51\u7ad9\u6f14\u793a\u6548\u679c\u5730\u5740\uff1ahttp:\/\/ashuai.work:8891\/home GitH [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-10007078","post","type-post","status-publish","format-standard","hentry","category-share"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10007078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10007078"}],"version-history":[{"count":0,"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10007078\/revisions"}],"wp:attachment":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10007078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10007078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10007078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}