vue项目实战day7

痛定思痛。 2023-01-03 01:20 106阅读 0赞

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

--------------------

### 文章目录 ###

*  角色权限路由分配
 *  导航栏动态处理

--------------------

# 角色权限路由分配 #

步骤:  
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>
         
          <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>