文档章节

react 操作权限思路

賤__是一種態度
 賤__是一種態度
发布于 2017/04/28 22:57
字数 117
阅读 53
收藏 1

1. 用户登录后初始化操作权限代码,存储在store中,

2.遍历store遍历判断是否拥有该按钮操作权限

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

export function hasAuthentication(Component) {

    class WrapAuthComponent extends React.Component {

        constructor(props) {
            super(props);
        }

        render () {
            let { permissions, auth, dispatch, ...rest } = this.props;
            let isAuthenticated = false;

            for(let i= permissions.length;i--;) {
                if(auth === permissions[i]){
                     isAuthenticated = true;
                     break;
                }
            }
            if( isAuthenticated ) {
                return (<Component {...rest}/>);
            }else {
                return null;
            }
        }
    }
    
    const mapStateToProps = (state) => ({
        permissions: state.system.menu.permissions || [],
    });

    WrapAuthComponent.propTypes = {
        auth:PropTypes.string.isRequired,
        permissions: PropTypes.array,
    }

    WrapAuthComponent.defaultProps = {
        auth:'',
        permissions: [],
    }

    return connect(mapStateToProps)(WrapAuthComponent);

}

 

© 著作权归作者所有

共有 人打赏支持
賤__是一種態度
粉丝 5
博文 26
码字总数 1978
作品 0
昌平
程序员
React体系前端权限控制方案

在做商家后台管理系统时,作为前端通常会设计到大量的权限控制问题,按照细粒度归归类大致可以分类以下三类 页面权限 模块权限-页面区块(组件)是否显示 元件权限-组件内元素是否显示 以往的...

amibug
07/11
0
0
颠覆式前端UI开发框架:React

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此...

雪舞__
2016/12/08
19
0
颠覆式前端UI开发框架:React

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此...

SomaLihq
06/27
0
0
iOS 开发是否要采用 React Native?

前言 React Native 是 Facebook 2015年开源的 Javascript 框架,旨在使用 Javascript 高效开发手机端 App。配合着多个显而易见的优势和 Facebook 强大的宣传机器,它立刻成为国内外大小公司的...

故胤道长
2017/11/20
0
0
react native之第三方库的相册相机(可裁剪可压缩等)等操作

第三方库的原生相册相机操作。第三方的react-native-image-crop-picker的功能更为完整易用(可多选、压缩、裁剪等)。 https://github.com/ivpusic/react-native-image-crop-picker //GitHub...

Chason-洪
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部