vue实际运用一：element+前端简单控制权限

前端简单控制权限

vue+element的NavMenu 导航菜单

在hove组件中，左边是NavMenu 导航菜单，右边是对应组件

1. 路由配置

{
    path: '/hove',
    name: 'Hove',
    component: ()=>import('../views/Hove.vue'),
    redirect: '/hove/person',	//重定向路由，是为了默认选中一个子级路由
	    children:[{
	      path: 'person',
	      name: 'Person',
	      component: ()=>import('../views/Person.vue'),
	      meta:{
	        roles: ['超级管理员', '管理员'],
	        fullPath: '/hove/person',
	        title:'人类'
	      }
	    },
	    {
	      path: 'women',
	      name: 'Women',
	      component: ()=>import('../views/Women.vue'),
	      meta:{
	        roles: ['超级管理员', '管理员'],
	        fullPath: '/hove/women',
	        title:'女人'
	      }
	    },
	    {
	      path: 'human',
	      name: 'Human',
	      component: ()=>import('../views/Human.vue'),
	      meta:{
	        roles: ['管理员'],
	        fullPath: '/hove/human',
	        title:'男人'
	      }
	    }
    ]
  },

将角色权限放在meta中，roles->角色权限，fullPath->用来当NavMenu 导航菜单的index，
title->用来当NavMenu 导航菜单的标题内容，还可以加入导航菜单的icon等

2. html

<div class="hove">
        <div class="left">
            <el-menu
            //导航菜单默认选中项，当前fullPath地址
            :default-active="$route.fullPath"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            //开启路由功能
            router
            active-text-color="#ffd04b">
            	//$router.options.routes获得所有路由信息
                <el-menu-item v-for="(item,index) in $router.options.routes[1].children" 
                :key="index" 
                //用fullPath坐导航菜单的索引，可以配合路由功能进行路由跳转
                :index="item.meta.fullPath"
//权限控制：用includes找到该路由是否包含这个角色，不包含就隐藏，达到简单权限控制，输入地址还是可以直接访问；role一般存在本地/vuex中（用户登录就获得角色）
                v-show="item.meta.roles.includes(role)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.meta.title}}</span>
                </el-menu-item>
            </el-menu>
        </div>
        //对应路由内容
        <div class="right">
            <router-view></router-view>
        </div>
    </div>

localStorage.role=“管理员”
this.role=localStorage.role

localStorage.role=“超级管理员”
this.role=localStorage.role

这个只是隐藏，还可以输入地址访问