前言半年前完成了铁路后台管理系统，系统整体业务比较复杂。这也是我去公司做这个系统的时候从0到1的一次完整的系统实践，在这个过程中踩了很多坑，学到了很多东西。没多久搞完这个系统，又来了一个系统，没及时总结，惭愧！其实我们现在做的后台管理系统的基本框架大部分都是一样的。后台管理系统主要是角色权限管理、按钮权限管理和菜单管理。后台管理系统。由于我们公司的项目都使用了Vue技术栈，所以本文也讲解一下Vue是如何进行权限管理的。文末有彩蛋！登录任何后台管理系统的权限授权都是从登录开始的，登录后返回用户的基本信息和token。token:存放在sessionStronge/localStronge中，然后添加到封装的axios的请求头中。每个请求都携带令牌。用户基本信息登录成功后，同时要做的事情很多，具体业务具体处理。后台管理系统登录成功后，会请求当前用户的菜单权限接口，获取用户的可访问路由（动态路由）。获取成功后，VueRouter不能直接使用，必须解析成符合VueRouter可识别的路由。format.loginhandleLogin(){this.$refs.loginForm.validate(valid=>{if(valid){this.loading=true;login(this.loginForm).then(res=>{if(res.code===200){//存储tokensessionStorage.setItem("tokens",res.data.token);//触发Vuex加载并获取当前用户的菜单，并解析路由store.dispatch("setMenuList");this.$message({message:"登录成功",type:"success",duration:1000});this.$router.replace({path:"/dashboard"});}}).catch(()=>{this.loading=false;});}else{console.log("errorsubmit!!");returnfalse;}});}获取当前用户菜单，解析路由并登录成功，本文使用Vuex获取当前用户菜单单一和解析路由store.dispatch("setMenuList");/**@Description:*@Author:ZhangXin*@Date:2021-02-0216:10:59*@LastEditTime:2021-02-2323:03:30*@LastEditors:ZhangXin*///getMenuparsebackgroundroutingimport{getMenu}from'../../utils/getMenu'//导入路由和静态路由importrouter,{constantRoutes}from'../../router/index'conststate={routerType:'',//菜单路由meunList:[]}constmutations={SET_ROUTER_TYPE(state,type){state.routerType=type},SET_ROUTER_MENULIST(state,list){//静态路由+动态路由合并完整路由constarray=constantRoutes.concat(list)state.meunList=arrayrouter.options.routes=arrayrouter.addRoutes([...array])}}constactions={setMenuList({commit,state}){//接收返回的路由数组returnnewPromise((resolve,reject)=>{getMenu().then(res=>{commit('SET_ROUTER_TYPE','')commit('SET_ROUTER_MENULIST',res)resolve(res)})})}}exportdefault{state,mutations,actions}解析后端返回的路由（强调）封装后的解析后端返回的路由，主要用于Vuex中/**@Description:*@Author:张鑫*@Date:2021-02-0216:03:48*@LastEditTime:2021-02-2323:09:02*@LastEditors:张鑫*/importLayoutfrom'@/layout'import{getUserAuthMenu}from'@/api/user'/***@description:解析后端返回的菜单树*@param{*}data后端返回的路由树*@param{*}arrmenu*@return{*}*/functiontree(data,arr){data.forEach((datas,index)=>{arr.push({路径：datas.path，名称：datas.name，类型：datas.types,hidden:datas.hidden=='true'?true:false,//当时这块被踩到了component:datas.component==='Layout'?Layout:resolve=>require([`@/views/${datas.component}.vue`],resolve),meta:{title:datas.meta.title,icon:datas.meta.icon,//用来存放按钮权限button:datas.meta.button},//redirect:datas.redirect,id:datas.id,//子路由children:[]})if(datas.children){constchildArr=tree(datas.children,[])arr[index].children=childArr}})returnarr}/***@description:获取当前登录用户的菜单*@param{*}*@return{*}*/exportfunctiongetMenu(){returnnewPromise(function(resolve,reject){getUserAuthMenu().then(res=>{if(res.code===200){constdatas=res.data//调用tree解析后端返回的树resolve(tree(datas,[]))}})})}后端接收路由格式。刷新前端收到的真实菜单树页面。至此路线丢失。vue动态权限控制已经实现。别高兴得太早，哈哈，一刷新页面，页面就进入了404页面，为什么呢？因为页面一刷新，Vuex保存的数据就会被清空，那么当然找不到当前路由，所以会进入404页面。如何处理？1.可以将完整的静态和动态路由存放在sessionStronge/localStronge中，然后当页面刷新时，在全局入口文件App.vue创建的生命周期中可以存放完整的路由router=sessionStronge/localStronge，当页面刷新时，它会重新加载完整的路由。2、如果使用Vuex获取并解析用户菜单，则可以在全局入口文件App.vue创建的生命周期中再次执行VuexAction重新加载用户菜单。我这块是直接在App.vue的生命周期中创建的，再次执行Vuex加载解析，没有进行其他操作。当然，具体业务要具体情况具体处理。
