vue权限问题的完美解决方案

<ponent :is="currentComponent"/>

if (store.getters.roles.length === 0) {
  store
   .dispatch('GetInfo')
   .then(res => {
   const roles = res.data.resultData && res.data.resultData.roles
   store.dispatch('GenerateRoutes', { roles }).then(() => {
    // 根据roles权限生成可访问的路由表
    // 动态添加可访问路由表
    router.addRoutes(store.getters.addRouters)
   })
   })
   .catch(() => {
   store.dispatch('Logout').then(() => {
    next({ path: '/user/login', query: { redirect: to.fullPath } })
   })
   })
  } else {
  next()
  }

const permission = {
 state: {
 routers: constRouterMap,
 addRouters: []
 },
 mutations: {
 SET_ROUTERS: (state, routers) => {
  state.addRouters = routers
  state.routers = constRouterMap.concat(routers)
 }
 },
 actions: {
 GenerateRoutes({ mit }, data) {
  //略
 }
 }
}

export const constRouterMap = [
 {
  path: '/',
  redirect: '/index',
  ponent: BasicLayout,
  children: [
   {
    path: '/index',
    name: 'index',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    ponent: () => import(/ webpackChunkName: "about" / '@/views/About.vue'),
    meta: {
     title: '仪表盘'
    }
   },
   {
    path: '/home',
    name: 'home',
    ponent: () => import(/ webpackChunkName: "home" / '@/views/Home.vue'),
    meta: {
     title: '表单页'
    }
   },
   {
    path: '/pattern',
    name: 'pattern',
    ponent: () => import(/ webpackChunkName: "pattern" / '@/views/DesignPattern.vue')
   },
   {
    path: '/map',
    name: 'map',
    ponent: () => import(/ webpackChunkName: "map" / '@/views/DataMap.vue'),
    meta: {
     title: '地图组件'
    }
   },
  ]
 },
 {
  path: '/user',
  redirect: '/login',
  ponent: UserLayout,
  children: [
   {
    path: '/login',
    name: 'login',
    ponent: () => import(/ webpackChunkName: "login" / '@/views/user/Login.vue')
   },
   {
    path: '/register',
    name: 'register',
    ponent: () => import(/ webpackChunkName: "login" / '@/views/user/Register.vue')
   }
  ]
 },
 //需要注意这里，404的路由一定要写在静态路由中
 {
  path: '/404',
  ponent: () => import(/ webpackChunkName: "not_found" / '@/views/NotFound.vue')
 }
]

export const asyncRouterMap = [
 {
  path: '/',
  redirect: '/index',
  ponent: BasicLayout,
  children: [
   {
    path: '/controls',
    name: 'controls',
    ponent: () => import(/ webpackChunkName: "controls" / '@/views/Controls.vue'),
    meta: {
     title: '权限设置',
     permission: ['admin']
    }
   }
  ]
 },
 //捕获未定义的路由配置
 {
  path: '',
  redirect: '/404',
  hidden: true
 }
]

window.location.reload();
this.$router.push({name: 'login'});