authority-filter

管理端用户前端权限过滤工具

Usage no npm install needed!

<script type="module">
  import authorityFilter from 'https://cdn.skypack.dev/authority-filter';
</script>

README

用于管理端权限管理的工具包。

安装

npm install authority-filter

 

功能简介

authority-filter 提供了三个维度的权限过滤方法。 分别为：getMenuList、getRouterList、getPageOperations 根据当前登录用户具有的权限，对后台管理系统分别进行：菜单过滤、路由过滤、页面操作权限过滤。  

快速上手

【step1】定义权限字典表

// authDictionary.js
const dictionary = {
    // 101：角色id
    101: [
        {
            // path：当前角色，有权访问的路由
            path: '/demo1',
            /** operations：
               * 当前角色，对当前页面具有的操作权限。
               * 名称由开发者自定义。
               * 不需要进行操作控制时，operations可不定义。
               */
            operations: ['create', 'edit', 'delete']
        },
        {
            path: '/demo2',
            operations: ['create', 'edit']
        },
        {
            path: '/demo3',
            operations: ['create', 'edit', 'delete']
        },
        {
            path: '/demo3/edit',
            operations: ['create', 'edit']
        },
        {
            path: '/demo3/detail'
        }
    ],
    102: [
        {
            path: '/demo1/edit',
            operations: ['edit', 'delete']
        },
        {
            path: '/demo2'
        }
    ]
}

export default dictionary;

 

【step2】定义菜单

// allMenus.js
const menus = [
    {
        title: '菜单1',
        icon: 'clock',
        url: '/demo1'
    },
    {
        title: '菜单2',
        icon: 'gear',
        submenu: [
            {
                title: '菜单2.1',
                url: '/demo2'
            }
        ]
    },
    {
        title: '菜单3',
        icon: 'clock',
        submenu: [
            {
                title: '菜单3.1',
                icon: 'clock',
                submenu: [
                    {
                        title: '菜单3.1.1',
                        url: '/demo3'
                    }
                ]
            }
        ]
    },
]

export default menus

【说明】

对于菜单的定义，submenu、url两个字段，不可以使用自定义名称。 其他字段可自定义。  

【step3】定义路由

// vue-router为例。allRouters.js
const pages_demo3_detail = () => import('pages/demo3/detail.vue')
const pages_demo3_edit = () => import('pages/demo3/edit.vue')
const pages_demo3_list = () => import('pages/demo3/list.vue')

const allRouters = [
    {
        path: '/demo3/detail',
        component: pages_demo3_detail
    },
    {
        path: '/demo3/edit',
        component: pages_demo3_edit
    },
    {
        path: '/demo3',
        component: pages_demo3_list
    }
]

export default allRouters

 

【step4】根据用户权限，进行过滤

// router.js
import $Auth from 'authority-filter'
import $authDic from '../model/authDictionary'
import $allMenus from '../model/allMenus'
import $allRouters from '../model/allRouters'

// 假定，从userInfo中拿到的roleId，值为101
const roleId = 101

// step1：【创建】传入权限字典 + 用户角色id
const auth = new $Auth($authDic, roleId)
// step2：全局存储 auth 对象。这里以vuex伪代码为例。（这步可选。我们建议这样做，如果需要进行页面操作权限的过滤，则必须这么做）
$store.commit('user/setAuth', auth)
// step3：【路由过滤】获取经过权限过滤后的路由
const routerList = auth.getRouterList([...$allRouters])
// step4：【菜单过滤】获取经过权限过滤后的菜单
const menuList = auth.getMenuList($allMenus)

 

<!-- list.vue（以vue项目为例。页面中使用）-->
<template lang="pug">
    .p-page
        .title 页面操作过滤demo
        .buttons
            // 'create'、'edit'、'delete'与权限字典表的operations定义字段，相对应
            el-button(v-if="operations.includes('create')") 创建
            el-button(v-if="operations.includes('edit')") 编辑
            el-button(v-if="operations.includes('delete')") 删除
</template>

<script>
import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState('user', [
            'auth'
        ])
    },
    data() {
        return {
            operations: []
        }
    },
    mounted() {
        this.operations = this.auth.getPageOperations(this.$route.path)
    }
}
</script>