vue-element-admin 权限控制

1、首先保证/src/store/文件夹下所有目录和文件齐全（含modules文件夹，getters.js文件，index.js文件），特别注意/src/store/modules/permission.js中的代码准确性

2、进入/src/router修改index.js，添加需要动态根据权限加载的路由表，注意变量名称为asyncRoutes

export const asyncRoutes = [
  {
    path: '/order1',
    component: Layout,
    name: 'Order1',
    meta: { title: '订单管理', icon: 'user', roles: ['admin'] },
    children: [
      {
        path: 'order',
        name: 'Order',
        component: () => import('@/views/order/index'),
        meta: { title: '订单管理', icon: 'user', roles: ['admin'] }
      },
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
];

3、动态挂载核心代码，修改/src/permission.js文件下NProgress.done() } else { 下面的代码（catch后代码没变，主要是catch前的代码修改）

const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
  next()
} else {
  try {
    // get user info
    const { roles } = await store.dispatch('user/getInfo')
    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    console.log(accessRoutes);
    router.addRoutes(accessRoutes)

    next({ ...to, replace: true })
  } catch (error) {
    // remove token and go to login page to re-login
    await store.dispatch('user/resetToken')
    Message.error(error || 'Has Error')
    next(`/login?redirect=${to.path}`)
    NProgress.done()
  }
}

4、若以上console.log有返回对象，证明挂载成功。若有必要，修改左侧栏的菜单显示，进入/src/layout/components/Sidebar/index.vue

// sidebar-item的v-for="route in routes"改为v-for="route in permission_routes"
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />

// computed的...mapGetters([下添加'permission_routes',
...mapGetters([
    'permission_routes',
    'sidebar'
]),

5、后端user的getInfo方法返回的数据格式为

$re = Db::name('admin')->where('token',$token)->find();
$returnData['name'] = $re['adminname'];
$returnData['avatar'] = 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif';
$returnData['roles'] = [$re['roles']];
return $this->setResult($returnData);

以上经测试成功