文档章节

Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制

o
 osc_g8254g7s
发布于 2019/08/20 14:53
字数 1350
阅读 56
收藏 0

精选30+云产品,助力企业轻松上云!>>>

权限控制方案

既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦。

前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作权限。

我们的设计把页面导航菜单和页面操作按钮统一存储在菜单数据库表中,菜单表中包含以下权限关注点。

菜单类型

菜单类型代码页面资源的类型。类型包括,0:目录   1:菜单   2:按钮'。

权限标识

权限标识即是代表此页面资源,用来进行权限控制的唯一标识,主要是进行增删改查的权限控制。

权限标识包括,sys:user:add:新增 sys:user:edit:编辑 sys:user:delete:删除 sys:user:view:查看。

注:目前查看都可以通过菜单可见性进行控制,所以查看权限标识目前没有用上,如果需要显示无权限页面可以使用。

菜单表结构

具体的菜单表结构如下。

复制代码
-- ------------------------------------------------
--  菜单
-- ------------------------------------------------
--  Table structure for `sys_menu`
-- ------------------------------------------------
CREATE TABLE `sys_menu` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '编号',
  `name` varchar(50) COMMENT '菜单名称',
  `parent_id` bigint COMMENT '父菜单ID,一级菜单为0',
  `url` varchar(200) COMMENT '菜单URL',
  `perms` varchar(500) COMMENT '授权(多个用逗号分隔,如:sys:user:add,sys:user:edit)',
  `type` int COMMENT '类型   0:目录   1:菜单   2:按钮',
  `icon` varchar(50) COMMENT '菜单图标',
  `order_num` int COMMENT '排序',
  `create_by` varchar(50) COMMENT '创建人',
  `create_time` datetime COMMENT '创建时间',
  `last_update_by` varchar(50) COMMENT '更新人',
  `last_update_time` datetime COMMENT '更新时间',
  `del_flag` tinyint DEFAULT 0 COMMENT '是否删除  -1:已删除  0:正常',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='菜单管理';
复制代码

导航菜单实现思路

1.用户登录系统

用户登录系统之后,跳转到首页。

2.根据用户加载导航菜单

在路由导航守卫路由时加载用户导航菜单并存储到store。

加载过程如下,返回结果排除按钮类型。

user -> user_role -> role -> role_menu -> menu。

3.导航栏读取菜单树

导航栏到sotre读取导航树并进行展示。 

页面按钮实现思路

1.用户登录系统

用户登录系统之后,跳转到首页。

2.根据用户加载权限标识集合

在路由导航守卫路由时加载用户权限标识集合。

加载过程如下,返回结果是用户权限标识的集合。

user -> user_role -> role -> role_menu -> menu。

3.页面按钮控制

页面操作按钮提供权限标识,查询是否在用户权限标识集合中。

在:有权限,可见或可用,不在:无权限,不可见或禁用。

目前本系统采用的是状态禁用。

权限控制实现

导航菜单权限

加载导航菜单

如下图所示,在导航守卫路由时加载导航菜单并保存状态。

router/index.js

页面组件引用

导航栏页面从共享状态中读取导航菜单树并展示。

views/NavBar/NavBar.vue

views/NavBar/NavBar.vue

页面按钮权限

添加权限获取接口

http/modules/user.js

复制代码
// 查找用户的菜单权限标识集合
export const findPermissions = (params) => {
    return axios({
        url: '/user/findPermissions',
        method: 'get',
        params
    })
}
复制代码

添加权限获取接口

store/modules/user.js

复制代码
export default {
    state: {
        perms: [],  // 用户权限标识集合
    },
    getters: {
   
    },
    mutations: {
        setPerms(state, perms){  // 用户权限标识集合
            state.perms = perms;
        }
    },
    actions: {
    }
}
复制代码

加载权限标识

如下图所示,在导航守卫路由时加载权限标识并保存状态。

router/index.js

权限按钮判断

封装了权限操作按钮组件,在组件中根据外部传入的权限标识进行权限判断。

views/Core/KtButton.vue

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

<script>
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'KtButton',
  props: {
    label: {  // 按钮显示文本
      type: String,
      default: 'Button'
    },
    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>
复制代码

权限判断逻辑

src/permission/index.js

复制代码
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) {
            hasPermission = true;
            break
        }
    }
    return hasPermission
}
复制代码

权限按钮引用

views/Sys/User.vue

测试效果

1.可用状态,操作按钮可用。

2.修改页面的权限标识,导致认证失败。

如下图所示,修改新增和删除按钮的权限标识(加个2),导致权限认证失败。

3.无权限,操作按钮禁用。

新增和删除按钮因为修改了权限标识,匹配失败,变成了禁用状态。

 

源码下载

后端:https://gitee.com/liuge1988/kitty

前端:https://gitee.com/liuge1988/kitty-ui.git


作者:朝雨忆轻尘
出处:https://www.cnblogs.com/xifengxiaoma/ 
版权所有,欢迎转载,转载请注明原文作者及出处。

 
分类:  Vue.js实战演练
标签:  vueelement
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue + Spring Boot 项目实战(一):项目简介

GitHub 地址:https://github.com/Antabot/White-Jotter 教程目录 第一部分 Vue + Spring Boot 项目实战(一):项目简介 Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目 Vue + Spring...

osc_61miaq6u
05/21
29
0
基于Vue实现后台系统权限控制

基于Vue.js 2.x系列 + Element UI 的后台系统权限控制 前言:关于vue权限路由的那些事儿…… 项目背景:现有一个后台管理系统,共存在两种类型的人员 ①超级管理员(称作admin),②普通用户(...

osc_lx0fj820
2018/03/01
2
0
Vue 后台权限控制解决方案

Vue2.0用户权限控制解决方案 .Vue 手把手写后台 .基于 vue2 + element-ui 构建的后台管理系统 微人事是一个前后端分离的人力资源管理系统 vue+iview 动态路由和权限验证 .端框架iviewui使用示...

IT追寻者
2018/06/29
1.2K
0
Vue + Spring Boot 项目实战(一):项目简介

GitHub 地址:https://github.com/Antabot/White-Jotter 教程目录 第一部分 Vue + Spring Boot 项目实战(一):项目简介 Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目 Vue + Spring...

疯子110
05/20
0
0
[Abp vNext微服务实践] - vue-element-admin登录二

简介: Vue Element Admin是基于vue、element ui开发的后台管理ui,abp vNext是abp新一代微服务框架。本篇将会介绍如何改造Vue Element Admin权限验证并接入abp vNext的微服务权限模块。上篇...

osc_sgztt2v6
2019/07/31
61
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么从HBase的0.96版本开始,舍弃了-ROOT-文件?

HBase结构的读写流程 (1). HBase0.96版本之前: (2). HBase0.96开始: a. 当客户端获取到.meta文件的位置之后,会缓存.meta.文件的位置 b. 客户端还会缓存HRegion的位置 -ROOT-存在的意义: ...

其乐m
今天
18
0
volatile关键字对 - What is the volatile keyword useful for

问题: At work today, I came across the volatile keyword in Java. 今天的工作中,我遇到了Java中的volatile关键字。 Not being very familiar with it, I found this explanation: 不太熟......

技术盛宴
今天
25
0
golang 封装 mysql 和 redis 连接

Mysql封装 package dbimport ("fmt"_ "github.com/go-sql-driver/mysql""github.com/jmoiron/sqlx")var DB *sqlx.DBfunc init(){database, err := sqlx.Op......

开源中国最牛的人
今天
21
0
pdfbox 读取文件报错 java.io.IOException: Page tree root must be a dictionary

pdfbox java.io.IOException: Page tree root must be a dictionary 示例代码 public static void main(String[] args) { try (InputStream sampleInputs = new ClassPathResource("s......

lemos
今天
28
0
整理 Linux下列出目录内容的命令

在 Linux 中,有非常多的命令可以让我们用来执行各种各样的任务。当我们想要像使用文件浏览器一样列出一个目录下的内容时,大家第一时间想到的是 ls 命令。但只有 ls 命令能实现这个目的吗?...

良许Linux
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部