authority-management

登录用户权限过滤工具

Usage no npm install needed!

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

README

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

安装

npm install authority-management

功能简介

authority-management 提供了三个维度的权限过滤方法。 分别为:getMenu、getPages、getPageOperations 根据当前登录用户具有的权限,对后台管理系统分别进行:菜单过滤、可访问页面过滤、指定页面操作权限过滤。

使用说明

1.constructor(dictionary, authList):

dictionary:用户定义的权限字典。 authList:当前登录用户具有的所有权限。

【详细说明】 1.dictionary 为一个字典对象,key 定义了识别权限的唯一编码,value 为格式化后的路由 + 操作权限名称,拼合而成的字符串。 形如:

const AUTHORITY_DICTIONARY = {
    // /content/culture/list 页面的提交权限
    11101: 'content_culture_list_submit',
    // /content/culture/list 页面的编辑权限
    11102: 'content_culture_list_edit',
}

这里的 key,需要与后端约定好,作为某个权限的唯一id

2.authList 为当前用户具有的权限列表(由后台返回) 形如:

[
    {
        id: 11101,
        name: 'xxx',
        desc: 'xxx'
    },
    {
        id: 11102,
        name: 'xxx',
        desc: 'xxx'
    }
]

这里的id,即为权限的唯一标识。除id外,其他返回字段可自由定义。

2.getMenu(allMenuList):

传入全部菜单栏数据,返回当前用户可访问的菜单列表。

数据格式要求:

[
    {
        title: '一级菜单1',
        url: 'xxx'
    },
    {
        title: '一级菜单2',
        submenu: [
            {
                title: '二级菜单1',
                url: 'xxx'
            }
        ]
    },
    {
        title: '一级菜单3',
        submenu: [
            {
                title: '二级菜单2',
                submenu: [
                    {
                        title: '三级菜单1',
                        url: 'xxx'
                    }
                ]
            },
            {
                title: '二级菜单3',
                submenu: [
                    {
                        title: '三级菜单2',
                        url: 'xxx'
                    }
                ]
            }
        ]
    },
]

重点关注url与submenu字段。

3.getPages(allRouterList):

传入全部路由列表,返回当前用户可访问的路由列表,即可访问的页面。

数据格式要求(形如vue-router路由定义):

[
    {
        path: 'xxxxxx'
    },
    {
        path: 'xxxxxx'
    }
]

重点关注path字段,其他字段可传入,本方法自动忽略。

4.getPageOperations(pageUrl):

传入页面的url,String类型。 形如:/content/culture/list 对应 AUTHORITY_DICTIONARY 的 value 操作权限名称之前的部分。 要求字段完全对应。

返回当前页面,当前用户拥有的操作权限对象。 对象字段对应 AUTHORITY_DICTIONARY 的 value 的操作权限名称定义。 形如:

{
    submit: true,
    edit: true
}

使用 Demo

import Auth from 'authority';
// 导入已定义好的权限字典表
import { AUTHORITY_DICTIONARY } from './model/authority';
// 导入已缓存的用户信息
import userInfo from './store/userInfo';

// 读取用户具有的权限列表
const authList = userInfo.permission_list;
// 获取 auth 对象
const auth = new Auth(AUTHORITY_DICTIONARY, authList);

const menuLIst = auth.getMenu(allMenuList);
const pageList = auth.getPages(allRouterList);
const pageOperations = auth.getPageOperations(pageUrl);