vue admin pro 角色不同显示不同页面

从后端获取动态路由，并根据不同角色侧边栏有不同页面，此框架有写好我们只需做部分修改，文章最后贴出渲染页面代码

1，src/config/net.config.js中按照官方注释改后端接口

// 默认的接口地址，开发环境和生产环境都会走/vab-mock-server
  // 正式项目可以选择自己配置成需要的接口地址，如"https://api.xxx.com"

2，src/config/setting.config.js中改导出路由模式！！！不改的话是不行的！！！

// intelligence(前端导出路由)和all(后端导出路由)两种方式
  // authentication: 'intelligence',
  //改动
  authentication: 'all',

3，src/store/modules/routes.js中设置后端导出路由(到这一步就完成啦，没想到这么简单我搞了一天，还加班，，，，）

 if (authentication === 'all') {
      // const {
      //   data: { list },
      // } = await getList()
            //改动
      let list = await getList()
      list = translateDataToTree(list)

我这里 getList()就是获取后端菜单接口方法在页面开头引入；translateDataToTree(list)也是官方写好的数组转树形结构，在src/utils/index.js中，里面的内容例如字段名需要根据自己项目修改，因为我的后端返回数据是同一级的所以需要转结构这个方法，看你项目需要

import { getList } from '@/api/router'
//下面是/api/router的getList 方法，这里获取方式按照自己项目来
import request from '@/utils/request'
export function getList(params) {
  return request({
    url: '/menus',
    method: 'get',
    params,
  })
}
//下面是translateDataToTree方法
const parent = data.filter(
  //   (value) => value.parentId === 'undefined' || value.parentId === null
  // )
  // const children = data.filter(
  //   (value) => value.parentId !== 'undefined' && value.parentId !== null
  // )
  // const translator = (parent, children) => {
  //   parent.forEach((parent) => {
  //     children.forEach((current, index) => {
  //       if (current.parentId === parent.id) {
    //改动
    (value) => value.parent_id === 'undefined' || value.parent_id === null||value.parent_id ===0
    )
    const children = data.filter(
      (value) => value.parent_id !== 'undefined' && value.parent_id !== null||value.parent_id !==0
    )
    const translator = (parent, children) => {
      parent.forEach((parent) => {
        children.forEach((current, index) => {
          if (current.parent_id === parent.id) {

4，由于后端返回数据和框架不一样，所以执行到上一步后需要该侧边栏字段回显部分，这里只贴出部分作为示例，可根据控制台报错知道哪里需要改动或者全局搜一下，也可以直接让后端改返回格式，这样最方便，一步到位！推荐！！。

        /src/vab/components/VabMenu/components/VabSubmenu.vue

        /src/vab/components/VabMenu/components/VabMenuItem.vue

        src/vab/components/VabBreadcrumb/index.vue 

        src/vab/components/VabColumnBar/index.vue

 <span>
                  <!-- {{ translateTitle(route.meta.title) }} -->
                  {{ translateTitle(route.meta_title) }}
 </span>

5，/src/router/index.js中对于不需要任何角色权限就可以看到页面的在constantRoutes里添加如个人中心，登录等自行添加

6，页面渲染，这里我用的是element ui的table多选没有弄树形结构，可能后期会弄吧~

<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="800px" @close="close">
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="角色码" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="菜单">
        <div class="vab-tree-border">
          <el-table border :data="list" ref="table" row-key="id" width="50%" height="400px" @selection-change="setTabelSelected">
						<el-table-column align="center" show-overflow-tooltip type="selection"
							:reserve-selection="true" />
						
						<el-table-column align="center" label="角色菜单" prop="name" show-overflow-tooltip />
					</el-table>
        
        </div>
      </el-form-item>
      
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>
 
<script>
  import {
    doEdit,
    getListMenus,
    getAllList,
    doAdd
  } from '@/api/roleManagement'
  import {
    getList
  } from '@/api/router'
  import {
    translateDataToTree
  } from '@/utils/index'
 
  export default {
    name: 'RoleManagementEdit',
    data() {
      return {
        form: {
          btnRolesCheckedList: [],
        },
        rules: {
          name: [{
            required: true,
            trigger: 'blur',
            message: '请输入角色码'
          }],
        },
        title: '',
        dialogFormVisible: false,
        list: [],
        ListMenus: [],
        // 存放选中的数据
        selectedList: [],
        /* btnRoles demo */
        btnRoles: [{
            lable: '读',
            value: 'read:system',
          },
          {
            lable: '写',
            value: 'write:system',
          },
          {
            lable: '删',
            value: 'delete:system',
          },
        ],
      }
    },
    created() {
    },
    methods: {
  //父组件调用获取数据
      showEdit(row) {
        if (!row) {
          this.title = '添加'
          this.form = Object.assign({}, row)
          this.fetchData()
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
          this.fetchData()
        }
        this.dialogFormVisible = true
      },
      close() {
        this.selectedList = []
        this.$refs['form'].resetFields() //重置表单
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      //获取数据
      fetchData() {
        const params = "id=" + this.form.id
        getListMenus(params).then((res) => {
          this.list = res
          //选中初始回显
          const loop= this.list.forEach(item => {
            this.$refs.table.clearSelection(); // 清除之前的选中状态
            if (item.checked == true) {
              // this.selectedList.push(item)
              // this.$refs.table.toggleRowSelection(item);
              this.selectedList = this.list.reduce((accumulator, item) => {
                if (item.checked == true && !accumulator.find(selectedItem =>
                    selectedItem.id === item.id)) {
                  accumulator.push(item);
                }
                return accumulator;
              }, []);
            }
          })
          this.selectedList.forEach(item => {
            this.$refs.table.toggleRowSelection(item);
          });
          if (this.selectedList !== 0) {
            this.test()
          }
        });
 
      },
      test() {
//这里是另一个全菜单后端接口，不包含checked属性，
        getAllList().then((res) => {
          // 使用filter方法筛选出包含指定id的对象
          const filteredObjects = res.filter(obj1 => {
            return this.selectedList.some(obj2 => obj2.id === obj1.id);
          });
          // 输出筛选后的对象数组
        })
      },
      // rows  将存放选中的数据（ selectedList ）传给setTabelSelected方法
      setTabelSelected(row) {
        // 检查当前行是否已经在selectedList中
        const index = this.selectedList.findIndex(item => item.id === row.id);
        const obj = this.selectedList.find(item => item.id === row.id);
        if (index === -1) {
          // 如果不存在，添加到selectedList中
          this.selectedList = row;
        } else {
          // 如果存在，从selectedList中移除
          this.selectedList.splice(index, 1);
        }
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid && this.selectedList.length !== 0) {
            const params = this.form.id
            // 使用map方法从每个对象中提取id，并创建一个新数组
            const idsExtracted = this.selectedList.map(item => item.id);
            this.form.menu_ids = idsExtracted
            console.log('this.form提交')
            console.log(this.form)
            if (this.title == '编辑') {
              doEdit(params, this.form).then((res) => {
                console.log('编辑')
                this.$emit('fetch-data')
              })
            }
            if (this.title == '添加') {
              doAdd(this.form).then((res) => {
                console.log('添加')
                this.$emit('fetch-data')
              })
            }
            this.close()
          }
        })
      },
    },
  }
</script>
 
<style lang="scss" scoped>
  .vab-tree-border {
    height: 200px;
    padding: $base-padding;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: $base-border-radius;
  }
</style>