[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-BdOLUenp":3,"public-project-articles-BdOLUenp":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},47,"BdOLUenp",39,"14. 多角色登录（Vue-Router路由守卫）","\n```vue\n\u003Crouter-view \u002F>\n```\n\n修改 vue 框架的内容\n\n1. 修改 HomevView.vue 为 Manager.vue\n\n```vue\n\u003C!--        主体区域-->\n\u003Cel-main>\n  \u003Crouter-view \u002F>\n\u003C\u002Fel-main>\n```\n\n2.  修改路由 router\u002Findex.js\n\n```javascript\n{\n  path: '\u002F',\n  name: 'Manager',\n  component: () => import('..\u002Fviews\u002FManager.vue'),\n  redirect: '\u002Fhome',  \u002F\u002F 重定向到主页\n  children: [\n    { path: 'home', name: 'Home', component: () => import('..\u002Fviews\u002FHome') }\n  ]\n},\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1693314518330-bfba8766-5ce7-4ec1-a592-674630628bdf.png#averageHue=%23393f44&clientId=u7506d3ff-c513-4&from=paste&height=201&id=ucce44a35&originHeight=251&originWidth=378&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=14580&status=done&style=none&taskId=ud6940fcf-04dd-4ac6-ad0b-6d97a2efd9f&title=&width=302.4)\n\n## 如何添加一个新的菜单和页面\n\n1. 新建一个 User.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    用户信息\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  name: \"User\",\n  data() {\n    return {}\n  },\n  created() {\n\n  },\n  methods: {}\n}\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n\n\u003C\u002Fstyle>\n```\n\n2. 添加一个新的路由\n\n```vue\nchildren: [\n  { path: 'user', name: 'User', component: () => import('..\u002Fviews\u002Fmanager\u002FUser') },\n]\n```\n\n3. 添加一个新的菜单\n\n```vue\n\u003Cel-submenu index=\"info\">\n  \u003Ctemplate slot=\"title\">\n    \u003Ci class=\"el-icon-menu\">\u003C\u002Fi>\n    \u003Cspan>信息管理\u003C\u002Fspan>\n  \u003C\u002Ftemplate>\n  \u003Cel-menu-item index=\"\u002Fuser\">用户信息\u003C\u002Fel-menu-item>\n\u003C\u002Fel-submenu>\n```\n\n## 如何设置多角色登录\n\n1. 在 user 表添加一个新的角色字段 role\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1693315060558-9e9b3e78-0227-41ca-b438-1c90efbb7748.png#averageHue=%23f9f5f4&clientId=u621ea072-0d1e-4&from=paste&height=301&id=u53b8c898&originHeight=376&originWidth=1154&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=23950&status=done&style=none&taskId=u2185e937-aa8c-40bf-8ab7-0669663b331&title=&width=923.2)\n\n2. 设置 2 种角色\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1693315085009-93b84b93-7917-402b-9e93-9b06ebe957bd.png#averageHue=%23f6f3f1&clientId=u621ea072-0d1e-4&from=paste&height=259&id=ua422d637&originHeight=324&originWidth=1251&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=42325&status=done&style=none&taskId=u1994615d-1ae5-454c-ba00-e1c2b6eb128&title=&width=1000.8)\n\n3. 在后台的 User 类里面加一个新的字段叫 role，然后重启后台\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1693315300752-71450f0c-ed54-478b-81ee-085605e331d3.png#averageHue=%232d2c2b&clientId=u621ea072-0d1e-4&from=paste&height=382&id=u3ed34858&originHeight=478&originWidth=663&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=42156&status=done&style=none&taskId=ufacc5847-f59f-4394-bd39-eaaf69098b9&title=&width=530.4)\n\n4. 在菜单的标签上加一个 v-if 就可以了\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1693315448588-95125542-a8be-4fd8-a0d4-0c76dc12fc35.png#averageHue=%232e2c2b&clientId=u621ea072-0d1e-4&from=paste&height=158&id=u1334d89a&originHeight=198&originWidth=835&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=24746&status=done&style=none&taskId=uac63d144-4fff-45a8-b17e-9d858b2f681&title=&width=668)\n\n## 路由守卫解决用户页面权限问题\n\n```javascript\nrouter.beforeEach((to, from, next) => {\n  \u002F\u002F to 是到达的路由信息\n  \u002F\u002F from 是开源的路由信息\n  \u002F\u002F next 是帮助我们跳转路由的函数\n  let adminPaths = ['\u002Fuser']\n  let user = JSON.parse(localStorage.getItem('honey-user') || '{}')\n\n  if (user.role !== '管理员' && adminPaths.includes(to.path)) {\n    \u002F\u002F 如果当前登录的用户不是管理员，然后当前的到达的路径是管理员才有权限访问的路径，那这个时候我就让用户去到一个没有权限的页面，不让他访问实际的页面\n    next('\u002F403')\n  } else {\n    next()\n  }\n})\n```\n","coding",1,2318,69,"2024-04-16 02:32:39","2026-05-03 22:49:02","【青哥带小白做毕设2024】完整教程资料汇总","qingge-graduation-project-2024",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,35,42,49,56,63,69,76,83,90,97,104,111,118,119,126,133,140,147,154,161,168],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":27,"project_title":15,"project_slug":16},33,"R1oMCsCX","00. 从0开始带小白做SpringBoot+Vue+uniapp微信小程序实战项目",12130,55,"2025-04-08 11:28:17","2026-05-07 15:33:28.189425+00",{"id":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},34,"s3u3u8W7","01. 网页布局技巧",3326,56,"2025-04-08 11:28:13",{"id":36,"uuid":37,"project_id":6,"title":38,"type":9,"status":10,"public_enabled":10,"views":39,"sort":40,"created_at":41,"updated_at":14,"project_title":15,"project_slug":16},35,"21zUHQYS","02. JavaScript入门",2017,57,"2025-04-08 11:27:55",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},36,"4XVgY9Ti","03. Vue脚手架搭建",3719,58,"2025-04-08 11:27:46",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},37,"S8vLLLvk","04. Git速成，推送代码到云端",1585,59,"2025-04-08 11:27:41",{"id":57,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},38,"9EbwnGDp","05. 网页布局神器ElementUI速成",2670,60,"2025-04-08 11:27:37",{"id":6,"uuid":64,"project_id":6,"title":65,"type":9,"status":10,"public_enabled":10,"views":66,"sort":67,"created_at":68,"updated_at":14,"project_title":15,"project_slug":16},"tmzahWer","06. Vue管理系统速成",3744,61,"2025-04-08 11:27:32",{"id":70,"uuid":71,"project_id":6,"title":72,"type":9,"status":10,"public_enabled":10,"views":73,"sort":74,"created_at":75,"updated_at":14,"project_title":15,"project_slug":16},40,"2agqAUQK","07. SpringBoot速成",3654,62,"2025-04-08 11:27:27",{"id":77,"uuid":78,"project_id":6,"title":79,"type":9,"status":10,"public_enabled":10,"views":80,"sort":81,"created_at":82,"updated_at":14,"project_title":15,"project_slug":16},41,"SXPAzgy7","08. Http扫盲，让小白也能听懂",2337,63,"2025-04-08 11:27:20",{"id":84,"uuid":85,"project_id":6,"title":86,"type":9,"status":10,"public_enabled":10,"views":87,"sort":88,"created_at":89,"updated_at":14,"project_title":15,"project_slug":16},42,"ostBIxAV","09. SpringBoot集成Mybatis实现增删改查",4190,64,"2025-04-08 11:27:13",{"id":91,"uuid":92,"project_id":6,"title":93,"type":9,"status":10,"public_enabled":10,"views":94,"sort":95,"created_at":96,"updated_at":14,"project_title":15,"project_slug":16},43,"6Sv7afpa","10. Vue封装前后端数据交互工具",3716,65,"2024-04-16 02:33:13",{"id":98,"uuid":99,"project_id":6,"title":100,"type":9,"status":10,"public_enabled":10,"views":101,"sort":102,"created_at":103,"updated_at":14,"project_title":15,"project_slug":16},44,"d53BPIQs","11. Vue登录（含验证码）、注册页面开发",4867,66,"2024-04-16 02:33:08",{"id":105,"uuid":106,"project_id":6,"title":107,"type":9,"status":10,"public_enabled":10,"views":108,"sort":109,"created_at":110,"updated_at":14,"project_title":15,"project_slug":16},45,"m033ng06","12. SpringBoot集成JWT token实现权限验证",3243,67,"2024-04-16 02:33:00",{"id":112,"uuid":113,"project_id":6,"title":114,"type":9,"status":10,"public_enabled":10,"views":115,"sort":116,"created_at":117,"updated_at":14,"project_title":15,"project_slug":16},46,"7xzyVD06","13. SpringBoot+Vue实现单文件、多文件上传和下载",2784,68,"2024-04-16 02:32:52",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":14,"project_title":15,"project_slug":16},48,"2Wkx3igg","15. Vue个人信息修改、修改密码、重置密码",2092,70,"2024-04-16 02:32:33",{"id":127,"uuid":128,"project_id":6,"title":129,"type":9,"status":10,"public_enabled":10,"views":130,"sort":131,"created_at":132,"updated_at":14,"project_title":15,"project_slug":16},49,"BDvVa4By","16. SpringBoot+Vue管理系统实现增删改查",2598,71,"2024-04-16 02:32:29",{"id":134,"uuid":135,"project_id":6,"title":136,"type":9,"status":10,"public_enabled":10,"views":137,"sort":138,"created_at":139,"updated_at":14,"project_title":15,"project_slug":16},50,"FJVl0rCu","17. SpringBoot+Vue实现数据的批量导入和导出",1684,72,"2024-04-16 02:32:26",{"id":141,"uuid":142,"project_id":6,"title":143,"type":9,"status":10,"public_enabled":10,"views":144,"sort":145,"created_at":146,"updated_at":14,"project_title":15,"project_slug":16},51,"FvW9oHgj","18. SpringBoot+Vue项目部署上线",2845,73,"2024-04-16 02:32:22",{"id":148,"uuid":149,"project_id":6,"title":150,"type":9,"status":10,"public_enabled":10,"views":151,"sort":152,"created_at":153,"updated_at":14,"project_title":15,"project_slug":16},52,"xyqrxxiR","19. SpringBoot+Vue集成富文本编辑器",1499,74,"2024-04-16 02:32:18",{"id":155,"uuid":156,"project_id":6,"title":157,"type":9,"status":10,"public_enabled":10,"views":158,"sort":159,"created_at":160,"updated_at":14,"project_title":15,"project_slug":16},53,"XAaCXz8W","20. SpringBoot+Vue集成系统公告",1043,75,"2024-04-16 02:32:14",{"id":162,"uuid":163,"project_id":6,"title":164,"type":9,"status":10,"public_enabled":10,"views":165,"sort":166,"created_at":167,"updated_at":14,"project_title":15,"project_slug":16},54,"2havlmaC","21. SpringBoot+Vue集成AOP系统日志",1159,76,"2024-04-16 02:32:11",{"id":25,"uuid":169,"project_id":6,"title":170,"type":9,"status":10,"public_enabled":10,"views":171,"sort":172,"created_at":173,"updated_at":14,"project_title":15,"project_slug":16},"ObvLqJdX","22. SpringBoot+Vue实现Echarts数据报表（柱状图、饼图、折线图）",1688,99,"2024-04-16 02:30:25"]