关于javascript:前端权限控制基于vuerouter的动态路由实现

在中后盾利用零碎开发中，大部分状况下会波及到用户权限管制，除了后端做权限验证外，前端在用户拜访时也须要基于用户权限做相应管制。针对前端应用vue框架的状况，对页面一级的权限管制，惯例解决是在页面导航栏通过管制导航显隐管制权限，但在浏览器地址栏输出拜访门路仍然能够拜访，能够用vue-router的动静路由来实现权限管制。

// router.jsimport Vue from 'vue'import Router from 'vue-router'Vue.use(Router)// 默认路由只配置无需权限的页面export default new Router({  mode: 'history',  base: process.env.BASE_URL,  routes: [    {      path: '/',      redirect: '/user/login'    },    {      path: '/user/login',      name: 'login',      component: () => import('@/views/user/Login.vue')    }  ]})

登录胜利后通过addRoutes更新路由配置

import routeConfig from '@/routeConfig'this.$api.user.login({  username,  password}).then(res => {  if(res.data.code === 0) {    // 登录胜利，依据返回权限码配置动静路由    let router = routeConfig();    router.routes.forEach(route => this.$router.options.routes.push(route));    // 必须将路由push到options中才失效    this.$router.addRoutes(router.routes);  }})

失常状况下这样就能够实现动静路由管制了，但刷新页面发现会呈现404，因为刷新时vue实例从新初始化了，导致动静路由被还原成默认路由，此时须要将权限码存储在本地，在main.js中依据权限码从新生成动静路由

// 刷新页面时依据本地缓存从新生成路由if(sessionStorage.getItem('permission')) {  let routerData = routeConfig();  routerData.routes.forEach(route => router.options.routes.push(route));  router.addRoutes(routerData.routes);}

以上步骤根本能够实现动静增加路由并在刷新页面是维持路由状态，但拜访根门路会始终跳转到登录页，无奈默认跳转到首页，这个问题目前还未想到好的解决方案。