vue权限菜单和按钮权限

1.服务端数据vue权限菜单需要根据后台返回的数据实现[{pid:-1,name:'shoppingcart',id:1,auth:'cart'},{pid:1,name:'购物车列表',id:4,auth:'cart-list'},{pid:4,name:'lottery',id:5,auth:'lottery'},{pid:4,name:'commodity',id:6,auth:'product'},{pid:-1,name:'shop',id:2,auth:'shop'},{pid:-1,name:'个人center',id:3,auth:'store'},];通过express返回权限列表constexpress=require('express');constapp=express();app.all('_',(req,res,next)=>{res.header('Access-Control-Allow-Origin','_');//Access-Control-Allow-Headers，可以按浏览器的F12查看，这里粘贴对应的即可res.header('Access-Control-Allow-Headers','Content-Type');res.header('Access-Control-Allow-Methods','\*');res.header('Content-Type','application/json;charset=utf-8');next();});app.get('/roleAuth',(req,res)=>{res.json({menuList:[{pid:-1,name:'购物车',id:1,auth:'cart'},{pid:1,name:'shoppingcartlist',id:4,auth:'cart-list'},{pid:4,name:'lottery',id:5,auth:'lottery'},{pid:4,name:'product',id:6,auth:'product'},{pid:-1,name:'store',id:2,auth:'shop'},{pid:-1,name:'个人中心',id:3,auth:'store'},]});});app.listen(3000);2.静态菜单使用element-ui构建静态菜单importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);导航一选项1-1选项1-1-1选项1-1-2选项1-2导航2导航三导航四路由配置importVuefrom'vue'importRouterfrom'vue-router'importHomefrom'./views/Home.vue'Vue.use(Router)exportconstauthRoutes=[//权限路由{path:'/cart',name:'cart',组件:()=>导入('@/views/Cart'),children:[{path:'cart-list',name:'cart-list',component:()=>import('@/views/CartList'),children:[{路径：'彩票'，名称：'彩票'，组件：（）=>导入（'@/views/Lottery'），}，{路径：'产品'，名称：'产品'，组件：（）=>import('@/views/Product'),},],},],},];exportdefaultnewRouter({//默认导出首页和404页面mode:'history',base:process.env.BASE_URL,routes:[{path:'/',name:'home',component:Home},{path:'*',component:{render:h=>h('h1',{},'NotFound')}}]})3.获取权限根据后端返回的数据格式化树结构提取用户权限//默认设置未获取权限exportdefaultnewVuex.Store({state:{hasPermission:false},mutations:{setPermission(state){state.hasPermission=true}},})在路由跳转前检查是否已经获取权限。如果没有，获取权限存入vuexrouter.beforeEach(async(to,from,next)=>{if(!store.state.hasPermission){//获取最新的路由列表letnewRoutes=awaitstore.dispatch('getRouteList');router.addRoutes(newRoutes);//添加新路由又}})4.获取相关数据constgetMenListAndAuth=(menuList)=>{letmenu=[];letsourceMap={};letauth=[];menuList.forEach(m=>{m.children=[];//添加子列表sourceMap[m.id]=m;auth.push(m.auth)if(m.pid===-1){menu.push(m);//根节点}else{sourceMap[m.pid]&&sourceMap[m.pid].children.push(m)}});return{menu,auth}//获取菜单数据和权限数据}asyncgetRouteList({dispatch,commit}){letauths=awaitaxios.get('http://localhost:3000/roleAuth');letmenuList=auths.data.menuList;let{menu,auth}=getMenListAndAuth(menuList);}5.找到需要添加的路由import{authRoutes}from'./router'constgetRoutes=auth=>{constfilter=(authRoutes)=>{returnauthRoutes.filter(route=>{//包括权限if(auth.includes(route.name)){if(route.children){route.children=filter(route.children);}returntrue;}})}returnfilter(authRoutes);};//获取需要添加的路由列表asyncgetRouteList({dispatch,commit}){letauths=awaitaxios.get("http://localhost:3000/roleAuth");letmenuList=auths.data.menuList;let{menu,auth}=getMenListAndAuth(menuList);commit("setMenu",menu);//保存菜单数据commit("setPermission");//获得权限//通过auth找到要添加的路由returngetRoutes(auth);}6.递归渲染菜单渲染Menu组件提取公共部分{{menu.name}}