前端权限控制

更新日期: 2019-04-03阅读: 4.5k标签: 前端

一、前言

在成熟的电商系统中,权限管理是不可或缺的一个环节。灵活的权限管理有助于管理员对不同的人员分配不同的权限,在满足业务需要的同时保证敏感数据只对有权限的人开放。笔者最近对系统的权限管理做了一次改造,在此分享一些经验以供参考。


二、权限管理基础

权限管理一般分以下 3 个基础概念:

  • 功能点
  • 角色
  • 用户

它们之间的关系一句话就能说清楚:一个用户可以拥有多个角色,而一个角色可以包含多个功能。比如一个员工可以既有收银员的角色,也有库管员的角色。对于收银员这个角色,可以有开单收银、查看订单、查看会员信息等功能点。


此外还有 2 个概念:

  • 功能权限
  • 数据权限

它们之间的关系举例来说明:
想象一个连锁店的场景,某个门店的管理员具有查看营收的功能权限,和查看自己门店数据的数据权限;高级管理员同样拥有查看营收的功能权限,并且有更高的数据权限,可以查看所有门店数据的数据。


三、前端权限控制

下面我们聚焦到前端领域,聊聊前端应该怎么做权限设计。前端本质上只有 1 种权限类型:组件权限。为了更好的理解和管理,又将组件权限拆分为以下 3 类:


每一个权限最终都会落到权限点上。权限点可以理解为一个数据编码,有这个权限点就说明有对应的功能权限。权限点的编码要注意 2 点:

  • 全局唯一
  • 尽量短小(减少带宽消耗,因为一个用户可能会有很多权限点)

需要控制权限的地方,都要定义一个权限点,然后告诉后端。一个用户所有的权限点会以数组的形式返回。判断是否有权限就是从数组中匹配一个元素。下面以 react 为例,聊聊具体的实现方式。

对于页面的权限判断,可以在 React Router 的 onEnter 回调中判断:

// 编码映射,下面的 getUrlCodeByName 会用到
export default {
    order_list:          'zaq0', // 订单列表
    order_detail:        'xsw1', // 订单详情
    order_refund_list:   'cde2', // 订单退款列表
    order_refund_detail: 'vfr3', // 订单退款详情
    order_deduct_modify: 'bgt4', // 订单修改业绩
};

function canAccessUrl(urlName) {
    const moduleCode = getUrlCodeByName(urlName); // 权限点一般是一个没意义的编码,为了易于理解,前端做了一个编码映射
    return accesses.u.indexOf(moduleCode) > -1;   // accesses.u 数组是后端返回的所有 url 权限点
}

function routerOnEnterCheck(urlName) {
    return function routerOnEnter(nextState, replace) {
        if (!canAccessUrl(urlName)) {
            replace('/unauthorized');
        }
    };
}

...

{
    path: 'list',
    getComponent: loadAsync(() => import(/* webpackChunkName: "order" */ '../../order/List')),
    onEnter: routerOnEnterCheck('order_list'),
}

...

对于菜单和组件的权限判断,大体上长这样:

// 用以缓存是否有权限访问组件
const componentAccessCache = {};

/**
 * 检查访问组件的权限
 * 一个组件可能会重复 render 多次,而组件权限的数量可能会超多(上百个),因此将权限缓存起来以提高性能
 */
function canAccessComponent(module, componentName) {
    if (!module || !componentName) {
        console.error(`canAccessComponent ${module} ${componentName} 缺参数`);
    }

    const key = `${module}.${componentName}`;

    let result = componentAccessCache[key];

    if (result !== undefined) {
        return result;
    }

    const moduleCode = getComponentCodeByModuleAndName(module, componentName);  // 权限点一般是一个没意义的编码,为了更易于理解,前端做了一个编码映射

    result = accesses.c.indexOf(moduleCode) > -1;    // accesses.c 数组是后端返回的所有组件权限点

    componentAccessCache[key] = result;

    return result;
}

class SomeComponent extends PureComponent {

    ...
    
    render() {
        return (
            ...
            {
                canAccessComponent('asset', 'buy_pay') &&
                <Button
                    type="primary"
                    className="btn-buy"
                    onClick={() => (buy(num))}
                >
                立即订购
                </Button>
            }
            ...
        )
    }
}

组件权限点的判断也可以封装成高阶组件的形式,这样看起来会舒服一点,但本质上是一样的,不再赘述。

权限点的获取笔者放在了 node 端,通过全局变量的形式注入到页面中,保证首屏的时候呈现的页面是由权限点过滤过的。此外接口返回的权限点是一个一维数组,为了加快前端检索速度,在 node 端根据编码规则将权限点分为 3 类(菜单/页面/组件),具体细节就不细说了。


四、总结

本文介绍了权限管理的基础知识,还结合 React 讲解了前端权限控制的一些细节。技术方案比较简单,真正麻烦的是每一个权限点的定义及录入,以及对现有系统的改造。改造过程中可以分模块进行迭代,毕竟罗马不是一天就能建成。

来自:https://segmentfault.com/a/1190000018759018


链接: https://www.fly63.com/article/detial/2708

前端开发,脱离菜鸟层次的二个关键点

我个人吧,一直认为学习前端技术是比较简单的事情,只要你真的是一步一个脚印的在前进,那你自然会有相应的结果可以收获。这里面包含二个关键点,一,脚踏实地;二,不断努力。

前端开发,如何写出优秀js代码

前端开发如何写出优秀js代码,什么样的javascript代码才是最优秀的的呢?我总结的大概分为三点:性能好,简单优雅,通俗易懂,这篇文章就将围绕这这3点来说明。

解读前端热更新原理

热更新:浏览器的网页通过websocket协议与服务器建立起一个长连接,当服务器的css/js/html进行了修改的时候,服务器会向前端发送一个更新的消息,如果是css或者html发生了改变,网页执行js直接操作dom,局部刷新,如果是js发生了改变,只好刷新整个页面。

你不知道的前端SDK开发技巧

作为一个SDK,我们的目标是让使用者能够减少查看文档的时间,所以我们需要提供一些类型的检查和智能提示,一般我们的做法是提供JsDoc,大部分编辑器可以提供快捷生成JsDoc的方式,另一种做法是使用Flow或者TypeScript

Web前端体系的脉络结构

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。

关于前端数据&逻辑的思考

这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步:拆分组件,逻辑处理,抽象、聚合数据

什么是前端? web1.0、web2.0时代的网页制作,前端开发都有哪些内容等

前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境

web前端的一些不为人知的冷知识点_html篇整理

web前端HTML篇冷知识点——这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。

web前端的一些不为人知的冷知识点_CSS篇整理

CSS篇整理:关于CSS的恶作剧、简单的文字模糊效果、垂直居中、多重边框、实时编辑CSS、创建长宽比固定的元素、CSS中也可以做简单运算

web前端的一些不为人知的冷知识点_Js篇整理

Js篇整理:生成随机字符串、整数的操作、重写原生浏览器方法以实现新功能、关于console的恶作剧、万物皆对象、If语句的变形、禁止别人以iframe加载你的页面、console.table

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!