vue 权限管理 菜单按钮权限控制（7）

最新推荐文章于 2024-05-23 18:21:10 发布
最新推荐文章于 2024-05-23 18:21:10 发布
阅读量2.4k 收藏 8
点赞数
分类专栏： vue 动态权限管理 文章标签： vue.js 动态权限管理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27081015/article/details/103938388
版权

1.通过权限管理调用后台的数据，在登录用户之后动态加载路由与菜单 并通过vuex 将路由信息及菜单信息保存到stroe中去

export default {
    state: {
        perms: [],  // 用户权限标识集合
    },
    getters: {
   
    },
    mutations: {
        setPerms(state, perms){  // 用户权限标识集合
            state.perms = perms;
        }
    },
    actions: {
    }
}
 api.user.findPermissions({'username': userName}).then(res => {
      // 保存用户权限标识集合
      // console.info(JSON.stringify(res.data))
      store.commit('setPerms', res.data)
    })

后台数据表

回传数据

[
  {
    "menuId": 18,
    "parentId": 5,
    "menuName": "修改菜单",
    "path": "",
    "component": "",
    "perms": "menu:edit",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:08:02.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 19,
    "parentId": 5,
    "menuName": "删除菜单",
    "path": "",
    "component": "",
    "perms": "menu:delete",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:08:02.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 21,
    "parentId": 6,
    "menuName": "修改部门",
    "path": "",
    "component": "",
    "perms": "dept:edit",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:09:24.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 65,
    "parentId": 64,
    "menuName": "新增字典",
    "path": "",
    "component": "",
    "perms": "dict:add",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2018-01-18T11:10:08.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 14,
    "parentId": 4,
    "menuName": "新增角色",
    "path": "",
    "component": "",
    "perms": "role:add",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:06:38.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 67,
    "parentId": 64,
    "menuName": "删除字典",
    "path": "",
    "component": "",
    "perms": "dict:delete",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2018-01-18T11:10:47.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 22,
    "parentId": 6,
    "menuName": "删除部门",
    "path": "",
    "component": "",
    "perms": "dept:delete",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:09:24.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 17,
    "parentId": 5,
    "menuName": "新增菜单",
    "path": "",
    "component": "",
    "perms": "menu:add",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:08:02.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 13,
    "parentId": 3,
    "menuName": "删除用户",
    "path": "",
    "component": "",
    "perms": "user:delete",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:04:58.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 20,
    "parentId": 6,
    "menuName": "新增部门",
    "path": "",
    "component": "",
    "perms": "dept:add",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:09:24.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 15,
    "parentId": 4,
    "menuName": "修改角色",
    "path": "",
    "component": "",
    "perms": "role:edit",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:06:38.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 66,
    "parentId": 64,
    "menuName": "修改字典",
    "path": "",
    "component": "",
    "perms": "dict:edit",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2018-01-18T11:10:27.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 16,
    "parentId": 4,
    "menuName": "删除角色",
    "path": "",
    "component": "",
    "perms": "role:delete",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:06:38.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 11,
    "parentId": 3,
    "menuName": "新增用户",
    "path": "",
    "component": "",
    "perms": "user:add",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:02:58.000+0000",
    "modifyTime": null,
    "menuChild": null
  },
  {
    "menuId": 12,
    "parentId": 3,
    "menuName": "修改用户",
    "path": "",
    "component": "",
    "perms": "user:edit",
    "icon": null,
    "type": "1",
    "orderNum": null,
    "createTime": "2017-12-27T09:04:07.000+0000",
    "modifyTime": null,
    "menuChild": null
  }
]

 自定义一个带有权限的按钮

<template>
  <el-button :size="size" :type="type" :icon="icon"
    :loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">
    {{label}}
  </el-button>
</template>

<script>
import { hasPermission } from '@/permission/permission.js'
export default {
  name: 'SkyButton',
  props: {
    label: {  // 按钮显示文本
      type: String,
      default: 'Button'
    },
    icon: {  // 按钮显示图标
      type: String,
      default: ''
    },
    size: {  // 按钮尺寸
      type: String,
      default: 'mini'
    },
    type: {  // 按钮类型
      type: String,
      default: null
    },
    loading: {  // 按钮加载标识
      type: Boolean,
      default: false
    },
    disabled: {  // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick: function () {
      // 按钮操作处理函数
      this.$emit('click', {})
    },
    hasPerms: function (perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) & !this.disabled
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>

 编辑权限管理的js  通过按钮中呈现的 权限例 user:add 来匹配从后台调用的数据 返回菜单时候可点击调用

import store from '@/store'

/**
 * 判断用户是否拥有操作权限
 * 根据传入的权限标识，查看是否存在用户权限标识集合
 * @param perms
 */
export function hasPermission(perms) {
  let hasPermission = false
  let permissions = store.state.user.perms
  for (let i = 0, len = permissions.length; i < len; i++) {
    if (permissions[i].perms=== perms||perms==='all:reload') {
      hasPermission = true;
      break
    }
  }
  // console.info(hasPermission)
  return hasPermission
}

最后在应用改路由的的页面中调用

<template>
  <div class="myContainer">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" label-width="120px">
        <el-form-item label="角色名称">
          <el-input v-model="filters.name" placeholder="角色名" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="filters.name" placeholder="角色名" size="mini"></el-input>
        </el-form-item>
        <el-form-item>
          <sky-button icon="fa fa-search" :label="$t('action.search')" perms="role:view" type="primary"/>
        </el-form-item>
        <el-form-item>
          <sky-button icon="fa fa-search" label="重置" perms="all:reload" type="primary"/>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8" type="flex" justify="end">
        <el-col :span="1.5">
          <sky-button icon="el-icon-plus" @click="drawer = true" label="新增" perms="role:add" type="primary"
                      size="mini"/>
        </el-col>
        <el-col :span="1.5">
          <sky-button icon="el-icon-delete" label="批量删除" perms="role:delete" type="danger" size="mini"/>
        </el-col>
        <el-col :span="1.5">
          <sky-button icon="el-icon-upload2" label="导入" perms="role:import" type="danger" size="mini"/>
        </el-col>
        <el-col :span="1.5">
          <sky-button icon="el-icon-download" label="导出" perms="role:export" type="warning" size="mini"/>
        </el-col>
      </el-row>
    </div>
    <!--表格内容栏-->
    <div class="contentbar"></div>
    <sky-table :height="350" rowkey="name" permsEdit="role:edit" permsDelete="role:delete"
               :data="pageResult" :columns="filterColumns"
               @findPage="findPage" @handleEdit="handleEdit" @handleDelete="handleDelete">
    </sky-table>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false">
      <div class="demo-drawer__content">
        <el-form :model="dataForm">
          <el-form-item label="活动名称">
            <el-input v-model="dataForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="dataForm.id" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确定'
            }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import SkyButton from "@/components/SkyButton/SkyButton.vue"
  import SkyTable from "@/components/SkyTable/SkyTable.vue"

  export default {
    name: "role",
    components: {
      SkyButton,
      SkyTable,
    },
    data() {
      return {
        drawer: false,
        size: 'small',
        filters: {
          name: ''
        },
        columns: [],
        filterColumns: [
          {prop: "id", label: "ID", minWidth: 50},
          {prop: "name", label: "用户名", minWidth: 120},
          {prop: "deptName", label: "机构", minWidth: 120},
          {prop: "roleNames", label: "角色", minWidth: 100},
          {prop: "email", label: "邮箱", minWidth: 120},
          {prop: "mobile", label: "手机", minWidth: 100},
          {prop: "status", label: "状态", minWidth: 70},
        ],
        loading: true,
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {
          content: [{
            id: '1',
            name: '王小虎2',
            deptName: '上海市普陀区金沙江路 1518 弄',
            roleNames: '上海市普陀区金沙江路 1518 弄',
            email: '上海市普陀区金沙江路 1518 弄',
            mobile: '上海市普陀区金沙江路 1518 弄',
            status: '上海市普陀区金沙江路 1518 弄',
          }, {
            id: '2',
            name: '王小虎3',
            deptName: '上海市普陀区金沙江路 1518 弄',
            roleNames: '上海市普陀区金沙江路 1518 弄',
            email: '上海市普陀区金沙江路 1518 弄',
            mobile: '上海市普陀区金沙江路 1518 弄',
            status: '上海市普陀区金沙江路 1518 弄',
            children: [
              {
                id: '3',
                name: '王小虎534',
                deptName: '上海市普陀区金沙江路 1518 弄',
                roleNames: '上海市普陀区金沙江路 1518 弄',
                email: '上海市普陀区金沙江路 1518 弄',
                mobile: '上海市普陀区金沙江路 1518 弄',
                status: '上海市普陀区金沙江路 1518 弄',
              }, {
                id: '4',
                name: '王小虎51',
                deptName: '上海市普陀区金沙江路 1518 弄',
                roleNames: '上海市普陀区金沙江路 1518 弄',
                email: '上海市普陀区金沙江路 1518 弄',
                mobile: '上海市普陀区金沙江路 1518 弄',
                status: '上海市普陀区金沙江路 1518 弄',
              }, {
                id: '5',
                name: '王小虎52',
                deptName: '上海市普陀区金沙江路 1518 弄',
                roleNames: '上海市普陀区金沙江路 1518 弄',
                email: '上海市普陀区金沙江路 1518 弄',
                mobile: '上海市普陀区金沙江路 1518 弄',
                status: '上海市普陀区金沙江路 1518 弄',
              }, {
                id: '6',
                name: '王小虎53',
                deptName: '上海市普陀区金沙江路 1518 弄',
                roleNames: '上海市普陀区金沙江路 1518 弄',
                email: '上海市普陀区金沙江路 1518 弄',
                mobile: '上海市普陀区金沙江路 1518 弄',
                status: '上海市普陀区金沙江路 1518 弄',
              }, {
                id: '7',
                name: '王小虎54',
                deptName: '上海市普陀区金沙江路 1518 弄',
                roleNames: '上海市普陀区金沙江路 1518 弄',
                email: '上海市普陀区金沙江路 1518 弄',
                mobile: '上海市普陀区金沙江路 1518 弄',
                status: '上海市普陀区金沙江路 1518 弄',
              }, {
                id: '8',
                name: '王小虎55',
                deptName: '上海市普陀区金沙江路 1518 弄',
                roleNames: '上海市普陀区金沙江路 1518 弄',
                email: '上海市普陀区金沙江路 1518 弄',
                mobile: '上海市普陀区金沙江路 1518 弄',
                status: '上海市普陀区金沙江路 1518 弄',
              },
            ],
          }, {
            id: '10',
            name: '王小虎6',
            deptName: '上海市普陀区金沙江路 1518 弄',
            roleNames: '上海市普陀区金沙江路 1518 弄',
            email: '上海市普陀区金沙江路 1518 弄',
            mobile: '上海市普陀区金沙江路 1518 弄',
            status: '上海市普陀区金沙江路 1518 弄',
          }]
        },
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        dataFormRules: {
          name: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ]
        },
        // 新增编辑界面数据
        dataForm: {
          id: 0,
          name: '',
          password: '123456',
          deptId: 1,
          deptName: '',
          email: 'test@qq.com',
          mobile: '13889700023',
          status: 1,
          userRoles: []
        },
        deptData: [],
        deptTreeProps: {
          label: 'name',
          children: 'children'
        },
        roles: []
      }
    },
    methods: {
      findPage() {
      },
      handleEdit() {
      },
      handleDelete() {
      },
      cancelForm() {
      },
    }
  }
</script>

<style scoped>
  .toolbar {
    /*width: 98%;*/
    background: #F7F7F7;
    padding: 10px 5px 10px;
    margin: auto;
  }
</style>

 

<sky-button icon="el-icon-plus" @click="drawer = true" label="新增" perms="role:add" type="primary"
                      size="mini"/>

 显示效果

砥砺-前行
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
本demo根据模拟数据实现包含菜单权限和按钮权限在内的权限管理。 判断登录后，通过store.getters.router判断是否存有路由表，是的话获取当前页面按钮权限后直接next()进行跳转；否的话用axios后台取一次路由数据...
vue与shiro结合实现权限按钮
12-15
授权（Authorization）是判断用户是否有执行某个操作的权限，这正是我们实现按钮权限的关键。我们可以将角色和权限信息存储在数据库中，然后通过Shiro的权限API进行查询和校验。 在实现按钮级别的权限控制时，我们...
若依框架前后端分离版——导入功能
冰茶不冰的博客
07-02 8613
在实际开发中经常需要使用导入导出功能来加快数据的操作。在项目中可以使用注解来完成此项功能。 在需要被导入导出的实体类属性添加@Excel注解。由于若依代码自动生成已经把导出功能实现好了，这里就不在赘述，下面记录一下我的Excel导入功能的实现流程。...
vue项目中$t(‘‘)的意思是什么
weixin_52797317的博客
04-03 4836
2.浏览器的语言环境不同，相应设置不同的语言配置文件。1.需要在main.js中引入vue-i18n。3.创建不同语言标识对应的文件。
用户如何实现菜单权限控制
最新发布
weixin_42917779的博客
05-23 1129
1.数据库表设计 1.1菜单权限控制涉及到的表： 1.用户表：t_user(主要字段：user_id、user_name) 2.角色表：t_role(主要字段：role_id、role_name) 3.用户角色表：t_user_role(主要字段：user_id、role_id) #一对多 4.角色菜单表：t_role_menu（主要字段:role_id、menu_id）#一对多 #菜单id、菜单名称、菜单级别(一级、二级、三级)、菜单父类id、菜单url 5.菜单表:
关于vue项目的角色权限树、角色授权、菜单按钮鉴权功能
Eleuuuuy的博客
07-24 1153
权限，数据结构，权限菜单，权限按钮
Vue：Vue的element组件中的el-row的属性gutter什么意思？
XRT_knives的博客
12-04 1万+
Vue：Vue的element组件中的el-row的属性gutter什么意思？ 资源 gutter elementui中gutter和offset的区别
如何添加关闭el-drawer功能
weixin_44099060的博客
05-14 1942
在方法中加入 this.$refs.drawerRefName.closeDrawer() 其中drawerRefName是抽屉ref属性值
Vue后台管理系统实现权限控制
05-17
本教程将深入探讨如何使用Vue.js和element-ui组件库实现一个完善的后台管理系统的权限控制机制。Vue.js是一个轻量级的前端框架，而element-ui则为Vue提供了丰富的UI组件，axios则常用于处理HTTP请求，Vuex则是Vue的...
vue实现后台管理权限系统及顶栏三级菜单显示功能
10-16
例如，`"权限设置"`菜单可能对`admin`和`editor`角色开放，而其子菜单`"页面权限"`仅对`admin`角色开放，`"按钮权限"`则仅对`editor`角色开放。 2. **路由守卫**：Vue Router 提供了 `beforeEach` 和 `afterEach` ...
vue中如何实现后台管理系统的权限控制的方法步骤
10-16
在Vue.js中实现后台管理系统的权限控制是构建大型Web应用的关键环节，这涉及到用户角色的安全性和数据保护。本文将详细讲解实现这一目标的步骤，主要包括接口访问的权限控制和页面权限控制。 一、接口访问的权限...
052_Drawer抽屉
aihiao的专栏
03-04 1488
1. Drawer抽屉 1.1. 有些时候, Dialog组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer拥有和Dialog几乎相同的API, 在UI上带来不一样的体验。 1.2. Drawer Attributes 参数 说明 类型 可选值 默认值 append-to-body Drawer自身是否插入至body元素上。嵌
【前端项目问题】draw抽屉的实现(Vue3)
Dai的博客
01-02 2387
【前端项目问题】draw抽屉的实现(Vue3)
实现el-table点击任意位置选中当前行并设置默认值
南北极之间
01-18 4446
这个需求，先是其他同事在做。在他的基础上我来改。思路比较混乱。浪费了一天半才解决。 需求： 点击，左边勾选之后。右边的输入框内的值变成30（只针对当前行生效）默认不填的话。值是null 然后我还加了个功能，在点击右边编辑的时候。就选择当前这行。 关键代码： 列表 <!-- 接口授权对话框 --> <el-dialog customClass="customWidth" title="接口授权" :visible.sync="openPower"> &
Element UI 在Table里进行直接新增和修改
adisMadman的博客
05-28 5326
最近做的一个项目，要求新增和修改不要用弹出框的形式，而是希望可以直接再表格中进行添加修改，做完后端的我，一脸懵逼，后来查看文档，总结如下，以便学习。 最终效果如下： 直接上代码： 前端： 1、三个按钮，新增、保存、批量新增的按钮： <el-row class="mb20" style="font-weight: bold">费用明细</el-row> <el-row :gutter="10" class="mb8"> &..
el-row和el-col问题汇总
Beam
03-16 1万+
一、el-col为空不显示 <el-row> <el-col :span="7">啊啊啊</el-col> <el-col :span="1"></el-col> <el-col :span="7">哦哦哦</el-col> <el-col :span="1">&nbsp;</el...
设置span固定宽度
热门推荐
xiaopeng__的专栏
09-06 1万+
最近制作网站时发现给span设置宽度会无效，通过查阅CSS2标准中关于width 的定义发现，原来CSS中的 width 属性并不总是有效的，如果对象是 inline 对象，width 属性就会被忽略，Firefox 和 IE 是遵循CSS标准，因而直接设置span宽度会无效。 如何设置span宽度：1.修改 span 为block 类型并设置float，但这不是完美的解决方法 在sp
好用的Span(富文本)api
lt的博客
08-31 300
/** * 将一段文字中指定range的文字改变大小 * @param range 要改变大小的文字的范围 ps:你关注的${name}也关注了你哟 = 4..(name.length+4) * @param scale 缩放值，大于1，则比其他文字大；小于1，则比其他文字小；默认是1.5 * ps: https://mp.weixin.qq.com/s/ji9MRaMhpVM711lDYL0LFw * 文章里搜索TextAppearanceSpan,可以设置某一段的很多.
vue之按钮新增删除
programmer188的博客
03-05 1161
<el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['pay:configBank:add']" >新增推广码 </el-button> </el-col> <el-col :span="1.5"> &l.
为什么vue中没有div
02-12
Vue 是一个前端 JavaScript 框架，它的核心思想是数据驱动和组件化。在 Vue 中，不存在 div 这个元素，因为它更侧重于组件的使用。你可以使用 Vue 提供的内置组件，也可以自定义组件，来构建页面结构。例如，你可以使用 "template" 标签来定义组件的模板，也可以使用 Vue 提供的 JSX 语法来定义组件。所以，在 Vue 中没有 div 不是问题，因为它仍然可以帮助你构建页面结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值