vue-element-admin 动态加载路由菜单，实现管理菜单权限控制

PS

首次使用vue-element-admin开发一个后台管理系统，细读官方教学

手摸手，带你用 vue 撸后台 系列二（登陆权限篇）

给的示例是前端实现权限控制，无法满足也无需求，于是乎，就查阅各种资料，查看示例，整理出如下方法，实现前端通过后端的接口菜单，实现动态加载后台菜单。
如有想实现的小白，可按照我如下步骤，比对，进行实现。
唯一需要注意的是，后台返回的json数据结构更改

主要改变文件

1. /src/router/index.js 修改变量：asyncRoutes 为如下：

   export const asyncRoutes = [
   	{
        
   		path: '*',
   		redirect: '/404',
   		hidden: true
   	}
   ]
   

2. src\store\modules\permission.js 做如下修改：

   import {
         asyncRoutes, constantRoutes } from '@/router'
   import {
         getAuthMenu } from '@/api/menu'
   import Layout from '@/layout'
   
   /**
   * Use meta.role to determine if the current user has permission
   * 使用 meta.role 确定当前用户是否具有权限
   * @param roles
   * @param route
   */
   function hasPermission(roles, route) {
        
   	if (route.meta && route.meta.roles) {
        
    		return roles.some(role => route.meta.roles.includes(role))
   	} else {
        
    		return true