Vue中动态权限到按钮的完整实现方案详解

本文主要是介绍Vue中动态权限到按钮的完整实现方案详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下...

为了进一步实现上面提到的动态路由功能,并且加入对每个路由的权限控制(即增、删、改、查按钮的权限控制),我们需要对数据库、后端接口、前端的设计做一些改进和扩展。下面我将详细描述如何在现有方案的基础上加入对路由的增、删、改、查权限控制。

一、数据库设计扩展

为了实现更细粒度的权限控制,我们需要对数据库结构做一些修改和扩展,增加对路由权限的支持。每个路由会关联四个权限:增、删、改、查。

1.1 修改路由表(routes)

首先,我们要扩展路由表,使其支持每个路由的增、删、改、查权限。

CREATE TABLE routes (
    id INT AUTO_INCREMENT PRIMARY KEY,
    path VARCHAR(255) NOT NULL,
    component VARCHAR(255) NOT NULL,
    name VARCHAR(255) NOT NULL,
    parent_id INT DEFAULT 0,
    meta jsON DEFAULT NULL, 
    is_enabled BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    -- 增、删、改、查权限
    permission_create BOOLEAN DEFAULT FALSE,
    permission_delete BOOLEAN DEFAULT FALSE,
    permission_update BOOLEAN DEFAULT FALSE,
    permission_view BOOLEAN DEFAULT TRUE
);
  • permission_create:该路由是否具有增权限。
  • permission_delete:该路由是否具有删权限。
  • permission_update:该路由是否具有改权限。
  • permission_view:该路由是否具有查权限。

1.2 修改角色与路由权限表(role_routes)

在role_routes表中,新增字段来存储角色对路由的权限,分别对应增、删、改、查。

CREATE TABLE role_routes (
    role_id INT,
    route_id INT,
    permission_create BOOLEAN DEFAULT FALSE,
    permission_delete BOOLEAN DEFAULT FALSE,
    permission_update BOOLEAN DEFAULT FALSE,
    permission_view BOOLEAN DEFAULT TRUE,
    PRIMARY KEY (role_id, route_id),
    FOREIGN KEY (role_id) REFERENCES roles(id),
    FOREIGN KEY (route_id) REFERENCES routes(id)
);

每条记录表示角色对某个路由的权限。

二、后端接口设计

在后端,我们需要确保路由的增、删、改、查权限在获取路由数据时被正确地返回,并且在路由的操作(如添加、删除、修改、查看)时进行权限控制。

2.1 修改获取路由接口

修改/api/get_routes接口,增加对路由权限的支持,返回每个路由的增、删、改、查权限信息。

@app.route('/api/get_routes', methods=['GET'])
def get_routes():
    role_name = request.args.get('role')
    role = Role.query.filter_by(name=role_name).first()
    
    if not role:
        return jsonify({'message': 'Role not found'}), 404
    
    routes = db.session.query(Route).join(RoleRoute).filter(RoleRoute.role_id == role.id).all()
    routes_data = []
    
    for route in routes:
        role_route = RoleRoute.query.filter_by(role_id=role.id, route_id=route.id).first()
        routes_data.append({
            'path': route.path,
            'component': route.component,
            'name': route.name,
            'meta': route.meta,
            'permissions': {
                'create': role_route.permission_create,
                'delete': role_route.permission_delete,
                'update': role_route.permission_update,
                'view': role_route.permission_view
            }
        })
    
    return jsonify(routes_data)

在这个接口中,我们通过RoleRoute表来获取每个角色对应的路由权限,并将这些权限一起返回。

2.2 添加路由权限的接口

我们还需要提供一个接口来修改路由权限(即为角色设置增、删、改、查权限)。

@app.route('/api/set_route_permissions', methods=['POST'])
def set_route_permissions():
    data = request.json
    role_id = data['role_id']
    route_id = data['route_id']
    permission_create = data['permission_crea编程te']
    permission_delete = data['permission_delete']
    permission_update = data['permission_update']
    permission_view = data['permission_view']

    role_route = http://www.chinasem.cnRoleRoute.query.filter_by(role_id=role_id, route_id=route_id).first()

    if not role_route:
        role_route = RoleRoute(role_id=role_id, route_id=route_id)
        db.session.add(role_route)

    role_route.permission_create = permission_create
    role_route.permission_delete = permission_delete
    role_route.permission_update = permission_update
    role_route.permission_view = permission_view
    
    db.session.commit()

    return jsonify({'message': 'Permissions updated successfully'})

该接口接收角色ID、路由ID以及增、删、改、查权限的设置,并更新数据库中的权限数据。

三、前端实现

前端需要根据从后端接口获取的路由信息和权限数据,动态生成路由,并根据权限来控制不同路由下按钮的显示与操作权限。

3.1 动态生成路由

前端的路由配置需要动态加载,并在路由生成时判断当前用户对该路由的权限。

在router/index.js中,我们可以根据权限信息来配置动态路由。

import Vue from 'vue';
import Router from 'vue-router';
import store from '../store';

Vue.use(Router);

const router = new Router({
  roupythontes: []
});

function generateRoutes(routes) {
  const routeArray = [];
  routes.forEach(route => {
    const routeConfig = {
      path: route.path,
      name: route.name,
      component: () => import(`@/views/${route.component}.vue`), // 动态加载组件
      meta: route.meta,
      permissions: route.permissions // 保存权限数据
    };

    if (route.children && route.children.length > 0) {
      routeConfig.children = generateRoutes(route.children);
    }

    routeArray.push(routeConfig);
  });
  return routeArray;
}

router.beforeEach(async (to, from, next) => {
  if (!store.state.routes.length) {
    const res = await store.dispatch('getRoutes');
    const routes = generateRoutes(res);
    routes.forEach(route => {
      router.addRoute(route);
    });
    next({ ...to, replace: true });
  } else {
    next();
  }
});

export default router;

3.2 根据权限动态显示按钮

前端页面上的操作按钮(如增、删、改、查)需要根据用户对路由的权限来进行显示和隐藏。假设每个页面都有这些按钮,我们可以使用v-if指令来根据权限控制显示与否。

<template>
  <div>
    <button v-if="hasCreatePermission">新增</button>
    <button v-if="hasUpdatePermission">编辑</button>
    <button v-if="hasDeletePermission">删除</button>
    <button v-if="hasViewpermission">查看</button>
  </div>
</template&goRbRHMJrt;

<script>
export default {
  computed: {
    hasCreatePermission() {
      return this.$store.state.userPermissions.create;
    },
    hasUpdatePermission() {
      return this.$store.state.userPermissions.update;
    },
    hasDeletePermission() {
      return this.$store.state.userPermissions.delete;
    },
    hasViewPermission() {
      return this.$store.state.userPermissions.view;
    }
  },
  created() {
    this.setPermissions(this.$route.meta.permissions);
  },
  methods: {
    setPermissions(permissions) {
      this.$store.commit('setUserPermissions', permissions);
    }
  }
}
</script>

在这个组件中,我们使用v-if指令根据权限来显示对应的按钮。hasCreatePermission、hasUpdatePermission等计算属性返回当前用户对该页面的权限,setPermissions方法会在页面加载时设置当前用户的权限。

3.3 在Vuex中存储用户权限

在Vuex中,我们可以存储用户的权限数据,并在不同的组件中访问。

// store.js
export default new Vuex.Store({
  state: {
    userPandroidermissions: {
      create: false,
      delete: false,
      update: false,
      view: true
    }
  },
  mutations: {
    setUserPermissions(state, permissions) {
      state.userPermissions = permissions;
    }
  },
  actions: {
    async getRoutes({ commit }) {
      const res = await axIOS.get('/api/get_routes', { params: { role: 'admin' } });
      commit('setRoutes', res.data);
      return res.data;
    }
  }
});

四、总结

通过以上的设计和实现,我们能够在前端根据路由和权限动态生成路由,并且为每个路由设置增、删、改、查等操作的权限。后端负责根据用户的角色返回对应的权限信息,前端通过vue-router和vuex管理动态路由和用户权限。通过这种方式,系统可以灵活地根据角色和权限来展示不同的功能,并且有效地控制用户对数据的操作权限。

这种设计方式非常适合复杂权限管理的系统,能够提供细粒度的权限控制,并且可以随着业务需求的变化灵活调整。

到此这篇关于Vue中动态权限到按钮的完整实现方案详解的文章就介绍到这了,更多相关Vue动态权限内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)!

这篇关于Vue中动态权限到按钮的完整实现方案详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1153630

相关文章

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Python实现精确小数计算的完全指南

《Python实现精确小数计算的完全指南》在金融计算、科学实验和工程领域,浮点数精度问题一直是开发者面临的重大挑战,本文将深入解析Python精确小数计算技术体系,感兴趣的小伙伴可以了解一下... 目录引言:小数精度问题的核心挑战一、浮点数精度问题分析1.1 浮点数精度陷阱1.2 浮点数误差来源二、基础解决

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

SpringBoot日志级别与日志分组详解

《SpringBoot日志级别与日志分组详解》文章介绍了日志级别(ALL至OFF)及其作用,说明SpringBoot默认日志级别为INFO,可通过application.properties调整全局或... 目录日志级别1、级别内容2、调整日志级别调整默认日志级别调整指定类的日志级别项目开发过程中,利用日志

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》:本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法,没有

Spring 中的切面与事务结合使用完整示例

《Spring中的切面与事务结合使用完整示例》本文给大家介绍Spring中的切面与事务结合使用完整示例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录 一、前置知识:Spring AOP 与 事务的关系 事务本质上就是一个“切面”二、核心组件三、完

Java实现远程执行Shell指令

《Java实现远程执行Shell指令》文章介绍使用JSch在SpringBoot项目中实现远程Shell操作,涵盖环境配置、依赖引入及工具类编写,详解分号和双与号执行多指令的区别... 目录软硬件环境说明编写执行Shell指令的工具类总结jsch(Java Secure Channel)是SSH2的一个纯J

MySQL8 密码强度评估与配置详解

《MySQL8密码强度评估与配置详解》MySQL8默认启用密码强度插件,实施MEDIUM策略(长度8、含数字/字母/特殊字符),支持动态调整与配置文件设置,推荐使用STRONG策略并定期更新密码以提... 目录一、mysql 8 密码强度评估机制1.核心插件:validate_password2.密码策略级

使用Python实现Word文档的自动化对比方案

《使用Python实现Word文档的自动化对比方案》我们经常需要比较两个Word文档的版本差异,无论是合同修订、论文修改还是代码文档更新,人工比对不仅效率低下,还容易遗漏关键改动,下面通过一个实际案例... 目录引言一、使用python-docx库解析文档结构二、使用difflib进行差异比对三、高级对比方

深度解析Python中递归下降解析器的原理与实现

《深度解析Python中递归下降解析器的原理与实现》在编译器设计、配置文件处理和数据转换领域,递归下降解析器是最常用且最直观的解析技术,本文将详细介绍递归下降解析器的原理与实现,感兴趣的小伙伴可以跟随... 目录引言:解析器的核心价值一、递归下降解析器基础1.1 核心概念解析1.2 基本架构二、简单算术表达