import React, { Component } from 'react'
import { Space, Tag, Typography } from 'antd'
import Highlighter from 'pages/system/doc/highlighter'

const { Text } = Typography

export default class index extends Component {
    render() {
        return (
            <Space direction="vertical" className="w-100-p">
                <Text>
                    在不少业务组件中，时常需要做到权限控制一些按钮的显示隐藏。如果只使用样式来隐藏按钮，是不安全的。
                </Text>
                <Text>所以在本框架中，推荐将按钮用全局的权限组件包裹来控制是否渲染。</Text>
                <Highlighter code={this.props.codes['auth/index.txt']} language="javascript" />
                <Text>
                    权限标识会读取全局用户信息中的
                    <Tag className="ml-xs" color="orange">
                        permissions
                    </Tag>
                    进行比对。
                </Text>
                <Text>权限组件内可以是任何元素，只要不符合条件，将不会渲染。</Text>
            </Space>
        )
    }
}
