vue项目实战day7

故心故心故心故心小故冲啊

---

---

角色权限路由分配

步骤:
1.默认路由与需要动态处理的路由
2.在meta中给与属性roles(不同角色分配不同的权限)
3.在vuex中处理动态路由(最终得到不同角色分配不同的路由)
4. router.addRoutes(asyncRoutes);动态添加这个路由
5. 这样就可以实现角色权限路由分配

import Vue from 'vue'
import Vuex from 'vuex'
//引入常规路由配置 和 动态路由配置
import { constantRoutes, asyncRoutes } from '@/router'

Vue.use(Vuex)

function filterAsyncRouter(asyncRoutes, rolesName) {
    var filterRouter = asyncRoutes.filter(item => {
        //通过判断不是拥有该角色,来过滤出对应的路由
        return item.meta && item.meta.roles && rolesName.some(v => item.meta.roles.includes(v))
    })
    return filterRouter;
}

const state = {
    //这个是经过处理的路由,不同角色所产生的的路由
    routes: [],
};
const getters = {
    routes: state => state.routes
};
const mutations = {
    //把从actions获得的路由修改state中的路由
    SET_ROUTES: (state, routes) => state.routes = routes
};
const actions = {
    //异步操作 =>需求不同角色所产生的的路由
    GETROUTES({ commit }, rolesName) {
        return new Promise((resolve) => {
            console.log(constantRoutes);
            //1.0获取到home
            var _routes = []; //接收home
            var home = constantRoutes.filter(v => v.path == '/home')[0];
            //清除home的children
            home.children = []; //清除
            //2.0为home添加children(需要判断当前角色)
            if (rolesName.includes('administrator')) { //是否是管理员
                //是管理员,那动态配置所有路由
                home.children = asyncRoutes;
            } else {
                //不是管理员
                //通过角色过滤出路由
                let filterRouter = filterAsyncRouter(asyncRoutes, rolesName);
                home.children = filterRouter;
            }
            //因为addRouter接受的参数是一个数组
            _routes = [home] || [];
            console.log(_routes)   //这里获得的路由是已经经过处理的(对应角色路由)
            commit('SET_ROUTES', _routes); 
            resolve(_routes);  

        })
    }

};

export default {
    state,
    getters,
    mutations,
    actions
}

导航栏动态处理

1.通过不同角色传过来的路由来动态处理导航栏

<template>
  <!-- 侧边导航栏 -->
  <el-aside width="200px">
    <el-menu default-active="$route.path" class="el-menu-vertical-demo" router exact>
     <!-- 通过v-for循环,每一次把一个路由对象传过去,让子组件进行渲染-->
      <navItem v-for="route in routes[0].children" :key="route.path" :item="route" />
    </el-menu>
  </el-aside>
</template>

<script>
import mapGetters  from "@/store/Modules/filterRouter";
import navItem from "./navItem";
export default {
  computed: {
    ...mapGetters["routes"]
  },
  components: {
    navItem
  }
};
</script>
<style >
</style>

子组件渲染

子组件分有子级和无子级渲染

<template>
  <div>
  <!-- 无子级-->
    <el-menu-item :index="item.path" v-if="!item.children">
      <i class="el-icon-s-home"></i>
      <span slot="title">{{item.meta.title}}</span>
    </el-menu-item>

  <!-- 有子级 -->
    <el-submenu :index="item.path" v-else>
      <template slot="title">
        <i class="el-icon-s-order"></i>
        <span slot="title">{{item.meta.title}}</span>
      </template>
          <!-- 利用递归,可以实现无限级导航菜单 -->
           <navItem v-for="child in item.children" :key="child.path" :item="child" />
    </el-submenu>
  </div>
</template>

<script>
export default {
    props:['item']
};
</script>
<style >
</style>