RuoYi-App根据不同角色权限实现功能按钮显隐

已于 2024-09-27 09:59:44 修改
阅读量351 收藏 2
点赞数 3
分类专栏： 日常工作总结 文章标签： javascript ruoyi uni-app
于 2024-09-26 14:48:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liao3399084/article/details/142554343
版权

文章目录

需求

根据角色不同，移动端显示不同功能，效果如下：
在这里插入图片描述

代码实现

该功能和管理后台不太一样；ruoyi自带的管理后台可以控制每个功能按钮，以及不同角色之间的数据权限；但是移动端不需要，只需要控制某个模块的显隐就行，所以只需要修改前端代码进行控制显隐即可；具体逻辑如下：
1、后台将指定角色功能权限保存到数据库
2、app端登录时查询该用户下所对应角色的功能权限，并保存到缓存中
3、跳转到指定路由时，通过自定义功能组件中的权限值和缓存中的数据进行对比，如果存在则显示，不存在则隐藏

注意

该方法不支持微信小程序，因为微信小程序不支持Vue.directive(‘x’, x) 自定义指令，欢迎打脸，请附上打脸链接。谢谢！！！ 下面有适用于小程序以及各个端的使用方法

上代码（不适应小程序）

1、查询后台角色权限，并保存到缓存

在 store/modules 文件夹下新增 permission.js 文件，代码如下

import auth from '@/plugins/auth'
import router, { constantRoutes, dynamicRoutes } from '@/router'
import { getRouters } from '@/api/menu'
import Layout from '@/layout/index'
import ParentView from '@/components/ParentView'
import InnerLink from '@/layout/components/InnerLink'

const permission = {
  state: {
    routes: [],
    addRoutes: [],
    defaultRoutes: [],
    topbarRouters: [],
    sidebarRouters: []
  },
  mutations: {
    SET_ROUTES: (state, routes) => {
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes)
    },
    SET_DEFAULT_ROUTES: (state, routes) => {
      state.defaultRoutes = constantRoutes.concat(routes)
    },
    SET_TOPBAR_ROUTES: (state, routes) => {
      state.topbarRouters = routes
    },
    SET_SIDEBAR_ROUTERS: (state, routes) => {
      state.sidebarRouters = routes
    },
  },
  actions: {
    // 生成路由
    GenerateRoutes({ commit }) {
      return new Promise(resolve => {
        // 向后端请求路由数据
        getRouters().then(res => {
          const sdata = JSON.parse(JSON.stringify(res.data))
          const rdata = JSON.parse(JSON.stringify(res.data))
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
          router.addRoutes(asyncRoutes);
          commit('SET_ROUTES', rewriteRoutes)
          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
          resolve(rewriteRoutes)
        })
      })
    }
  }
}

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
  return asyncRouterMap.filter(route => {
    if (type && route.children) {
      route.children = filterChildren(route.children)
    }
    if (route.component) {
      // Layout ParentView 组件特殊处理
      if (route.component === 'Layout') {
        route.component = Layout
      } else if (route.component === 'ParentView') {
        route.component = ParentView
      } else if (route.component === 'InnerLink') {
        route.component = InnerLink
      } else {
        route.component = loadView(route.component)
      }
    }
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children, route, type)
    } else {
      delete route['children']
      delete route['redirect']
    }
    return true
  })
}

function filterChildren(childrenMap, lastRouter = false) {
  var children = []
  childrenMap.forEach((el, index) => {
    if (el.children && el.children.length) {
      if (el.component === 'ParentView' && !lastRouter) {
        el.children.forEach(c => {
          c.path = el.path + '/' + c.path
          if (c.children && c.children.length) {
            children = children.concat(filterChildren(c.children, c))
            return
          }
          children.push(c)
        })
        return
      }
    }
    if (lastRouter) {
      el.path = lastRouter.path + '/' + el.path
      if (el.children && el.children.length) {
        children = children.concat(filterChildren(el.children, el))
        return
      }
    }
    children = children.concat(el)
  })
  return children
}

// 动态路由遍历，验证是否具备权限
export function filterDynamicRoutes(routes) {
  const res = []
  routes.forEach(route => {
    if (route.permissions) {
      if (auth.hasPermiOr(route.permissions)) {
        res.push(route)
      }
    } else if (route.roles) {
      if (auth.hasRoleOr(route.roles)) {
        res.push(route)
      }
    }
  })
  return res
}

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}

export default permission

2、获取缓存数据，用于权限比对

修改 store/getters.js文件，代码如下：

const getters = {
	token: state => state.user.token,
	avatar: state => state.user.avatar,
	name: state => state.user.name,
	userId: state => state.user.userId,
	nickName: state => state.user.nickName,
	roles: state => state.user.roles,
	permissions: state => state.user.permissions,

	intoArray: state => state.intoStore.intoArray,
	detailArray: state => state.intoStore.detailArray,

	permission_routes: state => state.permission.routes,
	topbarRouters: state => state.permission.topbarRouters,
	defaultRoutes: state => state.permission.defaultRoutes,
	sidebarRouters: state => state.permission.sidebarRouters,
}
export default getters

3、自定义权限组件

在store文件夹下新增 directive/index.js、directive/permission/hasPermi.js、directive/permission/hasRole.js三个js文件,代码依次如下：

index.js
import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'

const install = function (Vue) {
  Vue.directive('hasRole', hasRole)
  Vue.directive('hasPermi', hasPermi)
}

if (window.Vue) {
  window['hasRole'] = hasRole
  window['hasPermi'] = hasPermi
  Vue.use(install); // eslint-disable-line
}

export default install
hasPermi.js
 /**
 * v-hasPermi 操作权限处理
 * Copyright (c) 2019 hgkc
 */

import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}
hasRole.js
 /**
 * v-hasRole 角色权限处理
 * Copyright (c) 2019 hgkc
 */

import store from '@/store'

export default {
  inserted(el, binding, vnode) {
    const { value } = binding
    const super_admin = "admin";
    const roles = store.getters && store.getters.roles

    if (value && value instanceof Array && value.length > 0) {
      const roleFlag = value

      const hasRole = roles.some(role => {
        return super_admin === role || roleFlag.includes(role)
      })

      if (!hasRole) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置角色权限标签值"`)
    }
  }
}

4、引入自定义功能组件

修改main.js文件，代码如下

import Vue from 'vue'
import App from './App'
import store from './store' // store
import plugins from './plugins' // plugins
import './permission' // permission
import directive from './store/directive'
Vue.use(plugins)
import uView from "uview-ui";
Vue.use(uView);
Vue.use(directive);

Vue.config.productionTip = false
Vue.prototype.$store = store

App.mpType = 'app'

const app = new Vue({
  ...App
})


app.$mount()

上代码（适应多端）

利用函数传参的方式去实现该功能

1、查询后台角色权限，并保存到缓存

在 store/modules 文件夹下新增 permission.js 文件，代码如下

import auth from '@/plugins/auth'
import router, { constantRoutes, dynamicRoutes } from '@/router'
import { getRouters } from '@/api/menu'
import Layout from '@/layout/index'
import ParentView from '@/components/ParentView'
import InnerLink from '@/layout/components/InnerLink'

const permission = {
  state: {
    routes: [],
    addRoutes: [],
    defaultRoutes: [],
    topbarRouters: [],
    sidebarRouters: []
  },
  mutations: {
    SET_ROUTES: (state, routes) => {
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes)
    },
    SET_DEFAULT_ROUTES: (state, routes) => {
      state.defaultRoutes = constantRoutes.concat(routes)
    },
    SET_TOPBAR_ROUTES: (state, routes) => {
      state.topbarRouters = routes
    },
    SET_SIDEBAR_ROUTERS: (state, routes) => {
      state.sidebarRouters = routes
    },
  },
  actions: {
    // 生成路由
    GenerateRoutes({ commit }) {
      return new Promise(resolve => {
        // 向后端请求路由数据
        getRouters().then(res => {
          const sdata = JSON.parse(JSON.stringify(res.data))
          const rdata = JSON.parse(JSON.stringify(res.data))
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
          router.addRoutes(asyncRoutes);
          commit('SET_ROUTES', rewriteRoutes)
          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
          resolve(rewriteRoutes)
        })
      })
    }
  }
}

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
  return asyncRouterMap.filter(route => {
    if (type && route.children) {
      route.children = filterChildren(route.children)
    }
    if (route.component) {
      // Layout ParentView 组件特殊处理
      if (route.component === 'Layout') {
        route.component = Layout
      } else if (route.component === 'ParentView') {
        route.component = ParentView
      } else if (route.component === 'InnerLink') {
        route.component = InnerLink
      } else {
        route.component = loadView(route.component)
      }
    }
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children, route, type)
    } else {
      delete route['children']
      delete route['redirect']
    }
    return true
  })
}

function filterChildren(childrenMap, lastRouter = false) {
  var children = []
  childrenMap.forEach((el, index) => {
    if (el.children && el.children.length) {
      if (el.component === 'ParentView' && !lastRouter) {
        el.children.forEach(c => {
          c.path = el.path + '/' + c.path
          if (c.children && c.children.length) {
            children = children.concat(filterChildren(c.children, c))
            return
          }
          children.push(c)
        })
        return
      }
    }
    if (lastRouter) {
      el.path = lastRouter.path + '/' + el.path
      if (el.children && el.children.length) {
        children = children.concat(filterChildren(el.children, el))
        return
      }
    }
    children = children.concat(el)
  })
  return children
}

// 动态路由遍历，验证是否具备权限
export function filterDynamicRoutes(routes) {
  const res = []
  routes.forEach(route => {
    if (route.permissions) {
      if (auth.hasPermiOr(route.permissions)) {
        res.push(route)
      }
    } else if (route.roles) {
      if (auth.hasRoleOr(route.roles)) {
        res.push(route)
      }
    }
  })
  return res
}

export const loadView = (view) => {
  if (process.env.NODE_ENV === 'development') {
    return (resolve) => require([`@/views/${view}`], resolve)
  } else {
    // 使用 import 实现生产环境的路由懒加载
    return () => import(`@/views/${view}`)
  }
}

export default permission

2、获取缓存数据，用于权限比对

修改 store/getters.js文件，代码如下：

const getters = {
	token: state => state.user.token,
	avatar: state => state.user.avatar,
	name: state => state.user.name,
	userId: state => state.user.userId,
	nickName: state => state.user.nickName,
	roles: state => state.user.roles,
	permissions: state => state.user.permissions,

	intoArray: state => state.intoStore.intoArray,
	detailArray: state => state.intoStore.detailArray,

	permission_routes: state => state.permission.routes,
	topbarRouters: state => state.permission.topbarRouters,
	defaultRoutes: state => state.permission.defaultRoutes,
	sidebarRouters: state => state.permission.sidebarRouters,
}
export default getters

3、定义函数

在 utils 目录下创建 permission.js文件，代码如下

import store from '@/store'

/**
 * 字符权限校验
 * @param {Array} value 校验值
 * @returns {Boolean}
 */
export function checkPermi(value) {
	if (value && value instanceof Array && value.length > 0) {
		const permissions = store.getters && store.getters.permissions
		const permissionDatas = value
		const all_permission = "*:*:*"

		const hasPermission = permissions.some(permission => {
			return all_permission === permission || permissionDatas.includes(permission)
		})

		return hasPermission;
	} else {
		console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
		return false
	}
}

/**
 * 角色权限校验
 * @param {Array} value 校验值
 * @returns {Boolean}
 */
export function checkRole(value) {
	if (value && value instanceof Array && value.length > 0) {
		const roles = store.getters && store.getters.roles
		const permissionRoles = value
		const super_admin = "admin"

		const hasRole = roles.some(role => {
			return super_admin === role || permissionRoles.includes(role)
		})
		return hasRole;
	} else {
		console.error(`need roles! Like checkRole="['admin','editor']"`)
		return false
	}
}

4、引用函数

  1. 在需要权限控制的页面引用permission.js
import { checkPermi } from "@/utils/permission"

在这里插入图片描述
2. 在data中定义权限数组

rukuPermission:['system:user:resetPwd:aa']

在这里插入图片描述
3. 在methods中定义函数

checkPermission(permission){
	return checkPermi(permission);
}

在这里插入图片描述
4. 用v-if控制显隐

v-if="checkPermission(rukuPermission)"

在这里插入图片描述

验证是否可用

在需要根据权限显隐的功能按钮上使用 v-hasPermi ；如下图：
在这里插入图片描述
截图中的权限标识在后台管理系统中进行维护：
在这里插入图片描述

liaozk_c
关注
专栏目录
RuoYi-App启动教程
猿小白的博客
08-01 4317
RuoYi-App是若依的移动解决方案，采用uniapp框架，一份代码多终端适配，同时支持APP、小程序、H5！实现了与RuoYi-Vue平台(opensnewwindow)完美对接的移动解决方案！目前已经实现登录、我的、工作台、编辑资料、头像修改、密码修改、常见问题、关于我们等基础功能。.........
RuoYi-App 小程序springboot+Uniapp+Vue,应用框架基于uniapp
11-02
在RuoYi-App中，Vue.js作为UniApp的一部分，主要负责UI层的交互逻辑，提供数据绑定、组件化、指令系统等功能，使得开发者能够更加专注于业务逻辑的实现，而不是底层的技术细节。 在RuoYi-App的压缩包中，"RuoYi-Vue...
Uni-App连接后端Ruoyi-Cloud
ylp2023的博客
06-20 1411
img src="@/static/a.png" alt="产品图片" class="product-image rounded" />步骤2：修改Ruoyi-app的api/login.js里面的接口访问路径都改为后端Ruoyi-cloud的接口。Ruoyi-cloud准备一个新建模块以及要用的配置接口等等（根据自己的需求创建）* 这里为支持的请求头，如果有自定义的header字段请自己添加。步骤4：修改config.js的baseURL。步骤3：修改Ruoyi-app的。注意：每次修改一定要保存！
RuoYi-App移动版（uni-app）微信公众号授权登录
sayyy的专栏
05-09 1710
略
RuoYi-Vue-Plus 与 RuoYi-Cloud-Plus 高端进阶 源码分析 系列教程
热门推荐
李虹柏的博客
08-29 2万+
高端进阶 源码分析 系列教程
若依移动端Ruoyi-App 项目的后端项目入门
LlanyW的专栏
08-25 1529
链接：https://pan.baidu.com/s/1GjNhTPFfW5aMEYoy0QDZ3g?cmd管理员打开，执行：redis-server redis.windows.conf。代码连接数据库地方了也匹配上了。想起来我电脑从来没有安装过redis。下载安装redis到windows。name随便写，地址写本机ip。然后安装redis桌面软件。
RuoYi APP 移动端框架 使用RuoYi-Cloud作为后端
Gblfy_Blog
02-20 3647
RuoYi APP 移动端框架 使用RuoYi-Cloud作为后端
若依移动端Ruoyi-App——引入uview2.0开发项目
鲸鱼姐的专栏
11-04 9565
若依移动端Ruoyi-App只有个人中心，登录，其他模块都是建设中，因uniapp本身样式不够美观，所以本文基于ruoyi移动端引入uview2.0，实现基本功能。
RuoYi APP 移动端框架 使用RuoYi-Cloud作为后端 新增模块流程
Gblfy_Blog
02-20 1423
RuoYi APP 移动端框架 使用RuoYi-Cloud作为后端 新增模块流程
若依移动端Ruoyi-App——开发总结
鲸鱼姐的专栏
01-11 1万+
若依移动端Ruoyi-App—— 1. 去掉验证码 2. 修改前端h5端口 3. 修改后端端口 4. H5打包部署 5. 前后端参数传递 6. vue数组技巧 7. vue对象操作 8. 显示当前日期 9. 性别，状态显示使用filters过滤器 10 字典使用 11. 获取当前用户
若依移动端Ruoyi-App——使用uview2.0开发通知公告
鲸鱼姐的专栏
11-11 5272
背景：若依移动端Ruoyi-App没有通知公告内容，本文基于uview2开发通知公告列表及详情及界面前端，不改变后端内容。
RuoYi-Vue-Plus 是重写 RuoYi-Vue 针对 分布式集群与多租户 场景全方位升级(不兼容原框架)
03-09
RuoYi-Vue-Plus引入了动态数据源管理功能，使得系统可以根据业务需求灵活切换数据源。这在多租户场景下尤为重要，因为每个租户可能有自己的数据库。系统支持配置多个数据源，并能实现在运行时动态切换，无需重启服务...
RuoYi-Vue-Plus 是重写 RuoYi-Vue
03-07
RuoYi-Vue-Plus 引入了更强大的权限控制机制，如基于角色的访问控制（RBAC），以及更完善的用户认证和授权，保障了系统和数据的安全。 5. **模块化设计**： 为了适应复杂的业务需求，RuoYi-Vue-Plus 采用模块化...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4367
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 309
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
vue上传预览CAD文件
只会写bug
09-24 522
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 187
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 353
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
方法论大师 JavaScript 版本
最新发布
PlayerYK的专栏
09-25 158
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
ruoyi common
05-29
Ruoyi Common是一款基于SpringBoot 2.x开发的快速开发平台公共模块。该模块包含了常用的工具类、异常处理、Spring AOP切面等功能，可以在快速开发中提高效率，降低开发难度。 具体来说，Ruoyi Common模块提供了以下功能： 1. 统一异常处理：通过自定义异常类和异常处理器，实现了全局异常的统一捕获和处理。 2. 统一返回结果封装：通过自定义统一返回结果类，实现了全局返回结果的统一封装和格式化。 3. 常用工具类：提供了常用的字符串、日期、加密、文件操作等工具类。 4. Spring AOP切面：提供了日志记录、方法耗时统计等切面，方便进行系统性能监控和分析。 如果您使用Ruoyi快速开发平台，Ruoyi Common模块可以帮助您快速构建一个稳定、高效的系统。如果您没有使用Ruoyi，也可以单独使用该模块中的功能，提高开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值