前端权限控制-基于vue-router的动态路由实现

在中后台应用系统开发中，大部分情况下会涉及到用户权限控制，除了后端做权限验证外，前端在用户访问时也需要基于用户权限做相应控制。针对前端使用vue框架的情况，对页面一级的权限控制，常规处理是在页面导航栏通过控制导航显隐控制权限，但在浏览器地址栏输入访问路径依然可以访问，可以用vue-router的动态路由来实现权限控制。

// router.js

import 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);

}

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