前端权限控制方案

layman 发布于2019-08-21 17:32 / 3339人阅读

摘要：体系下的实现方式页面权限模块权限元件权限三种前端权限表现形式对应不同的管理策略。页面权限对于传统的多页应用，页面权限控制不需要前端关心，后端路由做一层控制。

在做商家后台管理系统时，作为前端通常会设计到大量的权限控制问题，按照细粒度归归类大致可以分类以下三类

页面权限

模块权限-页面区块（组件）是否显示

元件权限-组件内元素是否显示

以往的处理方式

后端会将用户权限数据同步注入到VM模板中或者前端发送异步请求取到权限数据，数据消费场景一般都散落在代码的角角落落。

    // 伪代码
    render(){
        return {window.permission?:null}
    }

    render(){
        return {this.props.permission?: null}
    }

用这种方式实现的代码，执行上没有问题，也达到了业务的需求。但是随着代码量的递增，代码变得难以维护，特别是新接手的同学，简直是一场噩梦。

React体系下的实现方式

页面权限、模块权限、元件权限三种前端权限表现形式对应不同的管理策略。

页面权限

对于传统的多页应用，页面权限控制不需要前端关心，后端路由做一层控制。在SPA架构的前端应用中，我们的思路是将所有的前端路由配置在后端，对于不同角色的用户，后端把路由列表吐给前端注册。

模块权限、元件权限

对于这两类权限控制的事就全部需要交给前端处理了，大致思路是将系统中用户散落的权限统一配置，通过HOC包装一下React组件，提供劫持渲染和权限透传的能力。

统一管理权限registerAuthRules

应用的所有权限配置会被统一配置在一个闭包中，权限的值支持后端同步吐出，也支持每次异步获取（利用Promise实现）

// 伪代码
export const AUTH_RULES = {
    "isX1": window.isX1 === "",
    "isX2": window.isX2 === "",
    "isX3": () => {
        return new Promise((resolve, reject) => {
            resolve(result); // resolve的参数只能是true或者false
        })
    },
};

registerAuthRules(AUTH_RULES);

权限规则表达式

权限列表中配置的只是颗粒度最细的单个权限。在实际业务需求中，我们常需要根据权限格则组合结果，决定是否显示。比如ComponentA的显示条件是isX1 && isX2 或者 isX1 || isX3。
这里需要引入权限规则表达式的概念。How to compute？
第一步：利用词法分析器解析出表达式中有多少个权限变量。利用esprima可以轻松取到
第二步：计算每个变量对应的权限值
第三部：计算规则表达式，因为权限规则有可能是异步或者的，这里将每个格则包装成Promise对象，利用Promise.all做统一返回，在成功的回调函数中通过New Function的方式计算字符串表达式的结果

// 计算表达式相关代码
function getExpressionValue(expression, data) {
    const codes = [];
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            const value =
                typeof data[key] === "string" ? `"${data[key]}"` : data[key];
            codes.push(`var ${key} = ${value};`);
        }
    }
    codes.push(`return ${expression};`);
    return new Function(codes.join(""))();
}

如何使用 registerAuthRules

注册权限规则列表，支持同步规则和异步规则
参数:

rules {Object} 应用权限规则MAP

registerComponentRules

注册组件显示规则，根据组件displayName配置组件所需权限列表
参数:

rules {Object} 组件权限规则MAP

调用查看

    export const COMPONENTS_RULES = {
        ComponentA: "isX1",
        ComponentB: "isX1 && isX2",
    };
    registerComponentRules(COMPONENTS_RULES)

Auth HOC函数

参数:

options {Object} 组件权限规则MAP

options.placeholder {Component} 组件隐藏时的占位节点；默认为noscript

options.initialHide {Boolean} 当存在异步权限规则时，组件是否先默认隐藏；默认值为true

options.rules {Object} 配置组件需要权限规则集合，作为props属性$auth传递给组件

1. 组件级别权限控制

根据WrappedComponent.displayName判断组件是否有权限

class Component{
  // ...
}
Component.displayName = "ComponentA";

const Authed_Component_1 = Auth({
  placeholder: 无权限的占位节点
})(Component)

2. 组件内部权限控制（权限属性模式）

class Page{
  render(){
    const {$auth} = this.props;
    return (
      
        { $auth.isShowDeleteBtn && 删除 }
      
    )
  }
}
// 权限校验条件与权限属性，组件内容没有校验逻辑
const Authed_Page = Auth({
  rules: {
    "isShowDeleteBtn": "isVip"
  }
})(Page);

代码实现[hoc-auth]https://github.com/amibug/hoc...

GPU云服务器云服务器权限控制角色权限控制 php控制权限 rbac权限控制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89643.html

如何在微服务架构中对资源（前端页面+后端接口）进行权限控制

如何对资源（前端页面+后端接口）进行权限控制在微服务架构中，请求的拦截在gateway中完成，而权限的查询是在uaa中完成，在gateway和uaa集成部署的情况下实现较为简单，如果两者分离实现起来就会比较麻烦，一种方案是在gateway的资源filter中内部调用uaa的权限查询模块，该方案是可行的，但是存在两个弊端：响应延时：每个资源的请求都会附带一次uaa内部调用，加重uaa服务的负担...

Nosee 2019-08-16 14:00 评论0 收藏0
前端真的能做到彻底权限控制吗？

摘要：有一天突然想到一个问题，端的权限控制真的能控制权限吗仅仅靠前端，能不能做到真正的权限控制如果需要后台配合，应该如何配合可能这是一个老生常谈的问题，但还是想整理下，有误的地方望大家指出。有一天突然想到一个问题，web端的权限控制：1.真的能控制权限吗？2.仅仅靠前端，能不能做到真正的权限控制？3.如果需要后台配合，应该如何配合？可能这是一个老生常谈的问题，但还是想整理下，有误的地方望大...

luck 2019-08-21 18:35 评论0 收藏0
权限设计的杂谈

摘要：权限设计的杂谈这篇文章的定位，不是宣传某个框架，仅仅之是梳理一下有关权限方面的一些想法和最近项目中的一些探索过程。而这两者的取舍则是有设计人员决定的。数据抽象原则最小特权划分从某个程度上来说决定了控制的对象，而数据抽象原则是是决定了操作。权限设计的杂谈这篇文章的定位，不是宣传某个框架，仅仅之是梳理一下有关权限方面的一些想法和最近项目中的一些探索过程。我们主要想解决一下问题。什么...

yck 2019-08-19 10:53 评论0 收藏0
20180308_vue-router前端权限控制问题

vue-router前端权限控制问题前提纲要：1.用户A和用户B有不同的权限。页面分左侧菜单部分和右侧内容部分，右侧内容可能有不同路径的不同内容最简单例子为点击左侧用户管理右侧显示用户列表点击某条内容详情右侧显示某一用户的详细内容 2.用户A可以访问路径权限如下： a/list a/detail/:id a/list/:id 用户B可以访问路径权限如下： ...

阿罗 2019-08-22 15:13 评论0 收藏0
前端插拔式 SPA 应用架构实现方案

摘要：插拔式应用架构方案和传统前端架构相比有以下几个优势业务模块分布式开发，代码仓库更易管理。 showImg(https://segmentfault.com/img/remote/1460000016053325?w=2250&h=1500); 背景随着互联网云的兴起，一种将多个不同的服务集中在一个大平台上统一对外开放的概念逐渐为人熟知，越来越多与云相关或不相关的中后台管理系统或企业级...

Cciradih 2019-08-26 12:14 评论0 收藏0