在中后台应用系统的开发中，大多数情况下都会涉及到用户权限控制。除了后端的权限验证，前端还需要根据用户的权限进行相应的控制。对于前端使用vue框架的情况，页面级权限控制的正常处理是在页面导航栏中通过控制navigation来控制权限，但是仍然可以通过输入访问路径访问访问路径在浏览器地址栏中。可以使用vue-router动态路由来实现权限控制。//router.jsimportVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router)//默认路由只配置不需要权限的页面exportdefaultnewRouter({mode:'history',base:process.env.BASE_URL,routes:[{path:'/',redirect:'/user/login'},{path:'/user/login',name:'login',component:()=>import('@/views/user/Login.vue')}]})登录成功后，通过addRoutes更新路由配置importrouteConfigfrom'@/routeConfig'this.$api.user.login({username,password}).then(res=>{if(res.data.code===0){//登录成功，根据返回的权限码配置动态路由letrouter=routeConfig();router.routes.forEach(route=>this.$router.options.routes.push(route));//路由必须被压入选项才能生效this.$router.addRoutes(router.routes);}})一般情况下，动态路由控制可以这样就可以实现了，但是刷新页面发现会出现404，因为vueinstance在刷新时重新初始化，导致动态路由恢复为默认路由。此时需要在本地存储权限码，在main.js中根据权限码重新生成动态路由//刷新页面时，根据本地缓存重新生成路由if(sessionStorage.getItem('权限')){让routerData=routeConfig();routerData.routes.forEach（路由=>路由器。options.routes.push(路线));router.addRoutes(routerData.routes);}以上步骤基本可以动态添加路由，并在页面刷新时保持路由状态，但是访问根路径会一直跳转到登录页面，无法通过默认，这个问题还没想到好的解决办法
