vue根据权限动态渲染按钮、组件等的函数式组件实现

 更新时间:2023年11月09日 10:25:28   作者:donggua_123  
这篇文章主要介绍了vue根据权限动态渲染按钮、组件等的函数式组件实现方式,具有很好的参考价值,希望杜大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前端工作中对于权限的需求是难免的,最近项目中就有这样的需求了。

后台管理员可以新增前台成员,不通的成员具有不同的权限,有权限的人员可以看到一些操作按钮或者数据列表,反之则看不到。

那么也就是说,前端需要根据登录用户的权限来渲染指定的dom。

1、components文件下新建authorized文件夹

文件夹下新建auth.js校验权限

const checkAuth = (authName) => {
    let authMap = ['admin', 'superAdmin', 'admin-1', 'landq'] // 根据实际项目需求配置
    return authMap.includes(authName);
}
export default checkAuth;

这里的authMap可以是从后台动态请求的,也可以是前端配置好的,甚至可以是其它格式的数据,根据各人业务需求处理,大致思路是一样的。

2、authorized文件夹下新建index.vue

<!-- 函数式组件 -->
<script>
import checkAuthorized from './auth';
export default {
    functional: true, // 函数式组件
    props: {
        // 接收参数
        authName: {
            type: String,
            required: true,
            default: ''
        }
    },
    render(h, context) {
        let { props, scopedSlots } = context;
        return checkAuthorized(props.authName)
            ? scopedSlots.default({
                  name: props.authName
              })
            : null;
    }
};
</script>

这里接收一个参数,登录用户名,在render函数里做进一步判断,如果权限为true则返回默认插槽里的dom,即渲染指定元素,反之返回null,不渲染

3、全局注册main.js

、、、
import Authorized from '@/components/authorized'; // 权限
 
Vue.config.productionTip = false;
Vue.component('Authorized', Authorized);
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

4、使用

<!-- authorized -->
<template>
    <div class="authorized">
        <Authorized authName="admin">
            <el-button type="primary" slot-scope="data">{{
                data.name
            }}</el-button>
        </Authorized>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {};
    },
    created() {},
    //生命周期 - 挂载完成(可以访问DOM元素)
    mounted() {},
    computed: {},
    //方法集合
    methods: {}
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>

当authName='admin'时,admin在authMap数组中,按钮渲染了

当authName='123'时便不会渲染

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3动态添加路由

    vue3动态添加路由

    这篇文章主要介绍了vue3动态添加路由,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • vue移动端实现下拉刷新

    vue移动端实现下拉刷新

    我们通过原理讲解以及代码实例给大家分享了关于VUE实现移动下拉刷新的功能,有的朋友可以跟着学习下。
    2018-04-04
  • Vue3源码解析watch函数实例

    Vue3源码解析watch函数实例

    这篇文章主要为大家介绍了Vue3源码解析watch函数实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue项目中扫码支付的实现示例(附demo)

    vue项目中扫码支付的实现示例(附demo)

    本文主要介绍了vue项目中扫码支付的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Element的穿梭框数据量大时点击全选卡顿的解决方案

    Element的穿梭框数据量大时点击全选卡顿的解决方案

    本文主要介绍了Element的穿梭框数据量大时点击全选卡顿的解决方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue路由权限控制解析

    Vue路由权限控制解析

    这篇文章主要介绍了Vue路由权限控制的相关资料,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化,这篇文章主要给大家介绍了关于vue3.0中watch侦听器的相关资料,需要的朋友可以参考下
    2021-10-10
  • 详解vue-cli脚手架中webpack配置方法

    详解vue-cli脚手架中webpack配置方法

    这篇文章主要介绍了详解vue-cli脚手架中webpack配置方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 浅析对Vue中keep-alive缓存组件的理解

    浅析对Vue中keep-alive缓存组件的理解

    <keep-alive> 是一个抽象组件,用于将其内部的组件保留在内存中,而不会重新渲染,这意味着当组件在<keep-alive> 内部切换时,其状态将被保留,而不是被销毁和重新创建,这篇文章主要介绍了Vue中的keep-alive缓存组件的理解,需要的朋友可以参考下
    2024-01-01
  • vue如何动态设置class、动态设置style

    vue如何动态设置class、动态设置style

    这篇文章主要介绍了vue如何动态设置class、动态设置style,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论