优化网站的目的,有没有帮别人做创意的网站,wordpress个性首页,淮南医院网站建设前言
最近做到了一个权限控制的功能。在这个功能中看到了这个功能的写法#xff0c;了解到了这个权限控制的功能#xff0c;也引发了思考。除了 v-if #xff0c;还有没有更好的#xff0c;更直观的#xff0c;更全局的写法呢#xff1f;带着这个问题#xff0c;我们先…前言
最近做到了一个权限控制的功能。在这个功能中看到了这个功能的写法了解到了这个权限控制的功能也引发了思考。除了 v-if 还有没有更好的更直观的更全局的写法呢带着这个问题我们先来看一下这个权限数据的来源。
权限来源
获取数据的方法也很简单就是后台接口请求数据。后端在登录后一次性返回所有的权限数据然后全局 localStorage 或者 store 存储起来。如果发生了修改就可以及时的通知到全局在使用获取的时候也方便快捷。代码如下
import { defineStore } from pinia
// 声明初始化
const defaultState {permissions: {}, // 权限列表
}// 设置state存储
function setData(obj) {Object.keys(obj).forEach((key) {state[key] obj[key]})// 每次改动更新缓存localStorage.setItem(LOCAL_STORAGE_NAME, JSON.stringify(toRaw(state)))
}// 请求权限码
async function getPermissionList() {const res await ajaxStore.common.getPermissionList()if (res.data?.code 0) {const arr res.data?.data ?? []const obj {}arr.forEach((item) (obj[item.permissionCode] item.permissionName))// 全局存储setData({ permissions: obj })return state.permissions} else {return null}
} 获取到数据以后就可以来思考怎么使用这些数据。目前所知的有3种权限控制方式下面我们一个一个的来看。
三种方法
1. 函数方式
这是我们最先想到的方法也是最常用的方法。代码如下
templatedivTabs :datatabConfigs/TabsNoPower v-if!(tabConfigs tabConfigs.length)/NoPower/div
/template
script setup namerealestateWarning
// 获取 permissions 数据
import useUser from /store/user
// 获取所有的菜单
import { realestateWarningTabs } from /const/menuconst userInfo useUser()
// 过滤tab权限
const tabConfigs computed(() {const { permissions } userInfo ?? {}return (realestateWarningTabs.filter((item) {item.label item.textreturn permissions[item.permissionCode]}) ?? [])
})
/script
本质就是使用 一个 tabConfigs 来筛选需要显示哪些 tab其中操作是从全局 store 中获取当前用户的权限码列表然后判断其中是否存在当前需要的权限码如果有对应的权限码就加进来。
2. 组件方式
我们可以单独写一个组件在组件内部进行权限的控制操作主要是通过插槽的形式把内部需要展示的组件引入进来在需要加权限的地方进行组件的引入组件内部的逻辑和函数方式基本无异。这样就可以统一管理权限了使用起来也比较方便。代码如下
templatedivPermission :valueAAAAAAAAAAAA//PermissionPermission :valueBBBBBBBBBBBB//PermissionPermission :valueCCCCCCCCCCCC//Permission/div
/template
scriptimport { Permission } from ./Permission;
/scriptscript
// 获取 permissions 数据
import useUser from /store/user
// 获取所有的菜单
import { realestateWarningTabs } from /const/menuexport default defineComponent({props: {value: {type: [Number, Array, String],default: ,},},setup(props, { slots }) {const userInfo useUser()const { permissions } userInfo ?? {}const { hasPermission } usePermission();function renderAuth() {const { value } props;if (!value) {return getSlot(slots);}return permissions[value] ? getSlot(slots) : null;}return () {return renderAuth();};},
});
/script3. 指令方式
指令方式就是自己写个指令在需要的组件上使用指令就行了。如下
引用
templatedivAAAAAA v-permissionAAAAAA/BBBBBB v-permissionBBBBBB/CCCCCC v-permissionCCCCCC//div
/template
编写指令
import { createApp, reactive, watchEffect } from vue
const codeList reactive([1, 2, 3])const hasPermission (value) {return codeList.includes(value)
}app.directive(permission, {updated(el, binding) {let update () {let valueNotChange binding.value binding.oldValuelet oldHasPermission hasPermission(binding.oldValue)let newHasPermission hasPermission(binding.value)let permissionNotChange oldHasPermission newHasPermissionif (valueNotChange permissionNotChange) returnif (newHasPermission) {addEl(el)} else {removeEl(el)}};if (el._watchEffect) {update()} else {el._watchEffect watchEffect(() {update()})}},
})在绑定元素挂载后调用使用 permissions 判断当前用户是否存在通过指令插入的按钮需要的权限码如果不存在直接移除绑定的元素。 在实际的开发中也会有其他的控制方式在各种论坛中也看到了使用装饰器来做的其实不管怎么做都是为了抽离业务逻辑是我们用起来跟简单为目的。
