基于vuex的权限管理

基于vuex的权限管理

1.这个项目分为教师端和学生端，两个角色页面的菜单栏不同

教师端：

学生端：

可以看到两个角色的菜单界面差距还是比较大的，这个项目采用了vuex管理不同角色的菜单信息

2.vuex中的代码（tchNav表示教师，stuNav表示学生）：

tchNav: [
      {
        i:"el-icon-s-home",				//表示文字前面的图标
        title:"首页",					   //表示菜单文字内容
        path:"/main/home",				//表示菜单路由地址
        name:"Home",					//表示菜单名称
      },
      {
        i:"el-icon-s-grid",
        title:"我的班级",
        path:"/main/classes/classesList",
        name:["Classes","ClassesList","ClassesSpace"]
      },
      {
        i:"el-icon-document-copy",
        title:"我的试卷",
        path:"/main/myTest",
        name:"MyTest"
      },
      {
        i:"el-icon-tickets",
        title:"我的题库",
        path:"/main/topic",
        name:"Topic"
      },
      {
        i:"el-icon-message",
        title:"我的消息",
        path:"/main/myMessage/inboxes",
        name:["Inboxes","SendMessage","MyMessage"]
      },
      {
        i:"el-icon-user",
        title:"个人中心",
        path:"/main/me",
        name:"Me"
      },
    ],
    stuNav: [
      {
        i:"el-icon-s-home",
        title:"首页",
        path:"/main/home",
        name:"Home"
      },
      {
        i:"el-icon-s-grid",
        title:"我的班级",
        path:"/main/classes/classesList",
        name:["Classes","ClassesList","ClassesSpace"]
      },
      {
        i:"el-icon-edit-outline",
        title:"我考过的试卷",
        path:"/main/MyFinishTest",
        name:"MyFinishTest"
      },
      {
        i:"el-icon-message",
        title:"我的消息",
        path:"/main/myMessage/inboxes",
        name:["Inboxes","SendMessage","MyMessage"]
      },
      {
        i:"el-icon-user",
        title:"个人中心",
        path:"/main/me",
        name:"Me"
      },
    ]

3.在main.vue的计算属性中导入vuex的数据

computed: {
    ...mapState(['activeName','tchNav','stuNav','userName','userRole'])
  },

使用mapState时需要先导入vuex中的辅助函数

import { mapState, mapMutations } from 'vuex';

4.比如说得到了tchNav的数据，在页面上对应位置v-for进行渲染