湖南智能网站建设哪里好？网站备案主体是什么？

湖南智能网站建设哪里好,网站备案主体是什么,wordpress无刷新分页,网络购物平台文章目录 一、获取权限码二、三种按钮级别的权限控制方式【1】函数方式【2】组件方式【3】指令方式 一、获取权限码 要做权限控制#xff0c;肯定需要一个code#xff0c;无论是权限码还是角色码都可以#xff0c;一般后端会一次性返回#xff0c;然后全局存储起来就可以了… 文章目录 一、获取权限码二、三种按钮级别的权限控制方式【1】函数方式【2】组件方式【3】指令方式 一、获取权限码 要做权限控制肯定需要一个code无论是权限码还是角色码都可以一般后端会一次性返回然后全局存储起来就可以了在登录成功以后获取并保存到全局的store中 import { defineStore } from pinia; export const usePermissionStore defineStore({state: () ({// 权限代码列表permCodeList: [],}),getters: {// 获取getPermCodeList(){return this.permCodeList;}, },actions: {// 存储setPermCodeList(codeList) {this.permCodeList codeList;},// 请求权限码async changePermissionCode() {const codeList await getPermCode();this.setPermCodeList(codeList);}} })二、三种按钮级别的权限控制方式 【1】函数方式 使用示例如下 templatea-button v-ifhasPermission([20000, 2000010]) colorerror classmx-4拥有[20000,2000010]code可见/a-button /templatescript langtsimport { usePermission } from //hooks/web/usePermission;export default defineComponent({setup() {const { hasPermission } usePermission();return { hasPermission };},}); /script本质上就是通过v-if只不过是通过一个统一的权限判断方法hasPermission export function usePermission() {function hasPermission(value, def true) {// 默认视为有权限if (!value) {return def;}const allCodeList permissionStore.getPermCodeList;if (!isArray(value)) {return allCodeList.includes(value);}// intersection是lodash提供的一个方法用于返回一个所有给定数组都存在的元素组成的数组return (intersection(value, allCodeList)).length 0;return true;} }很简单从全局store中获取当前用户的权限码列表然后判断其中是否存在当前按钮需要的权限码如果有多个权限码只要满足其中一个就可以。 【2】组件方式 除了通过函数方式使用也可以使用组件方式Vue vben admin提供了一个Authority组件使用示例如下 templatedivAuthority :valueRoleEnum.ADMINa-button typeprimary block 只有admin角色可见 /a-button/Authority/div /template scriptimport { Authority } from //components/Authority;import { defineComponent } from vue;export default defineComponent({components: { Authority },}); /script使用Authority包裹需要权限控制的按钮即可该按钮需要的权限码通过value属性传入接下来看看Authority组件的实现。