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

最新推荐文章于 2024-07-16 11:34:18 发布

donggua_123

最新推荐文章于 2024-07-16 11:34:18 发布

阅读量3k

点赞数 1

分类专栏：前端 vue js 文章标签： vue 权限函数式组件

本文链接：https://blog.csdn.net/dongguan_123/article/details/101999648

版权

本文介绍了如何在Vue项目中根据用户权限动态渲染按钮和组件。通过创建一个函数式组件，结合权限映射（authMap）进行权限校验，实现了不同权限用户看到不同DOM的效果。文章详细讲解了从创建auth.js校验文件，到在index.vue中处理渲染逻辑，再到全局注册及实际使用的过程。

摘要由CSDN通过智能技术生成

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

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

那么也就是说，前端需要根据登录用户的权限来渲染指定的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, scope