{"componentChunkName":"component---src-templates-components-tsx","path":"/components/authorized","webpackCompilationHash":"1daf920fd56dc476eb98","result":{"data":{"markdownRemark":{"description":{"descriptionHtml":"","apiHtml":"

API#

\n

Authorized#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeRequiredDefaultAlternative
policy权限策略对象Policy是----
noMatch验证未通过展示React.ReactNode否null--
authority权限string、string[]是----
children需要控制权限的组件或者自定义渲染的函数function、React.ReactNode否null--
\n

children为function会将权限结果传递给自定义渲染的函数

\n
(isMatch) => {\n  // your code\n}
"},"tableOfContents":"","frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"type":"Business Components"},"fields":{"path":"/components/authorized/index.en-US.md","slug":"/components/authorized","modifiedTime":1576230292794}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"发送验证码组件","type":"基础组件"},"fields":{"slug":"/components/send-code-cn","path":"/components/send-code/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"Send verification code component","type":"Basic Components"},"fields":{"slug":"/components/send-code","path":"/components/send-code/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"滚动条","type":"基础组件"},"fields":{"slug":"/components/scrollable-bar-cn","path":"/components/scrollable-bar/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"ScrollableBar","type":"Basic Components"},"fields":{"slug":"/components/scrollable-bar","path":"/components/scrollable-bar/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"全屏组件","type":"基础组件"},"fields":{"slug":"/components/full-screen-cn","path":"/components/full-screen/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"Full Screen","type":"Basic Components"},"fields":{"slug":"/components/full-screen","path":"/components/full-screen/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/fit-text-cn","path":"/components/fit-text/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"Adaptive Text","type":"Basic Components"},"fields":{"slug":"/components/fit-text","path":"/components/fit-text/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"基础组件"},"fields":{"slug":"/components/error-boundary-cn","path":"/components/error-boundary/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"Basic Components"},"fields":{"slug":"/components/error-boundary","path":"/components/error-boundary/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/button-list-cn","path":"/components/button-list/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"Button Group","type":"Basic Components"},"fields":{"slug":"/components/button-list","path":"/components/button-list/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"权限组件","type":"业务组件"},"fields":{"slug":"/components/authorized-cn","path":"/components/authorized/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"Authorized Component","type":"Business Components"},"fields":{"slug":"/components/authorized","path":"/components/authorized/index.en-US.md"}}}]},"demos":{"edges":[{"node":{"content":{"content":{"zh-CN":"\n

权限组件使用示例。

\n","en-US":"\n

Permission component usage example.

\n"},"highlightedCode":"
const AuthorizedPlus = (props) => {\n  const actions = [\n    { module: 'module1', action: 'action1' },\n    { module: 'module1', action: 'action2' },\n    { module: 'module1', action: 'action3' },\n    { module: 'module2', action: 'action1' },\n    { module: 'module2', action: 'action2' }\n  ];\n  const policy = new Policy(actions);\n  \n  policy.addPolicy({\n    version: 1,\n    statement: [\n      {\n        effect: 'allow',\n        action: [\n          'module1/*'\n        ]\n      }\n    ]\n  });\n  \n  return (\n    <Authorized {...props} policy={policy} />\n  )\n}\n\nconst NoAuth = () => {\n  return (\n    <span style={{ color: '#ff4d4f' }}>no auth</span>  \n  )\n}\n\nrender(\n  <div className=\"authorized-demo\">\n    <AuthorizedPlus authority=\"*\">\n      <Button type=\"primary\">操作1</Button>\n    </AuthorizedPlus>\n     \n    <AuthorizedPlus authority=\"module1/action1\">\n      <Button type=\"primary\">操作2</Button>\n    </AuthorizedPlus>\n    \n    <AuthorizedPlus authority=\"module2/action1\" noMatch={<NoAuth />}>\n      <Button type=\"primary\">操作3</Button>\n    </AuthorizedPlus> \n  </div>\n)
\n"},"code":"\"use strict\";\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nvar AuthorizedPlus = function AuthorizedPlus(props) {\n var actions = [{\n module: 'module1',\n action: 'action1'\n }, {\n module: 'module1',\n action: 'action2'\n }, {\n module: 'module1',\n action: 'action3'\n }, {\n module: 'module2',\n action: 'action1'\n }, {\n module: 'module2',\n action: 'action2'\n }];\n var policy = new Policy(actions);\n policy.addPolicy({\n version: 1,\n statement: [{\n effect: 'allow',\n action: ['module1/*']\n }]\n });\n return React.createElement(Authorized, _extends({}, props, {\n policy: policy\n }));\n};\n\nvar NoAuth = function NoAuth() {\n return React.createElement(\"span\", {\n style: {\n color: '#ff4d4f'\n }\n }, \"no auth\");\n};\n\nrender(React.createElement(\"div\", {\n className: \"authorized-demo\"\n}, React.createElement(AuthorizedPlus, {\n authority: \"*\"\n}, React.createElement(Button, {\n type: \"primary\"\n}, \"\\u64CD\\u4F5C1\")), React.createElement(AuthorizedPlus, {\n authority: \"module1/action1\"\n}, React.createElement(Button, {\n type: \"primary\"\n}, \"\\u64CD\\u4F5C2\")), React.createElement(AuthorizedPlus, {\n authority: \"module2/action1\",\n noMatch: React.createElement(NoAuth, null)\n}, React.createElement(Button, {\n type: \"primary\"\n}, \"\\u64CD\\u4F5C3\"))));","frontmatter":{"title":{"zh_CN":"基础样例","en_US":"Basic Example"},"cols":null,"order":0,"subtitle":null,"type":null},"fields":{"slug":"/components/authorized/demo/simple","path":"/components/authorized/demo/simple.md"}}},{"node":{"content":{"content":{"zh-CN":"\n

权限组件使用示例。

\n","en-US":"\n

Permission component usage example.

\n"},"highlightedCode":"
const AuthorizedPlus = (props) => {\n  const actions = [\n    { module: 'module1', action: 'action1' },\n    { module: 'module1', action: 'action2' },\n    { module: 'module1', action: 'action3' },\n    { module: 'module2', action: 'action1' },\n    { module: 'module2', action: 'action2' }\n  ];\n  const policy = new Policy(actions);\n  \n  policy.addPolicy({\n    version: 1,\n    statement: [\n      {\n        effect: 'allow',\n        action: [\n          'module1/*'\n        ]\n      }\n    ]\n  });\n  \n  return (\n    <Authorized {...props} policy={policy} />\n  )\n}\n\nrender(\n  <div>\n    <AuthorizedPlus authority=\"*\">\n      {(isMatch) => (\n        <span>权限校验结果: {isMatch + ''}</span>\n      )}\n    </AuthorizedPlus>\n    <br />\n    <AuthorizedPlus authority=\"module2/action1\">\n      {(isMatch) => (\n        <span>权限校验结果: {isMatch + ''}</span>\n      )}\n    </AuthorizedPlus>\n  </div>\n)
"},"code":"\"use strict\";\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nvar AuthorizedPlus = function AuthorizedPlus(props) {\n var actions = [{\n module: 'module1',\n action: 'action1'\n }, {\n module: 'module1',\n action: 'action2'\n }, {\n module: 'module1',\n action: 'action3'\n }, {\n module: 'module2',\n action: 'action1'\n }, {\n module: 'module2',\n action: 'action2'\n }];\n var policy = new Policy(actions);\n policy.addPolicy({\n version: 1,\n statement: [{\n effect: 'allow',\n action: ['module1/*']\n }]\n });\n return React.createElement(Authorized, _extends({}, props, {\n policy: policy\n }));\n};\n\nrender(React.createElement(\"div\", null, React.createElement(AuthorizedPlus, {\n authority: \"*\"\n}, function (isMatch) {\n return React.createElement(\"span\", null, \"\\u6743\\u9650\\u6821\\u9A8C\\u7ED3\\u679C: \", isMatch + '');\n}), React.createElement(\"br\", null), React.createElement(AuthorizedPlus, {\n authority: \"module2/action1\"\n}, function (isMatch) {\n return React.createElement(\"span\", null, \"\\u6743\\u9650\\u6821\\u9A8C\\u7ED3\\u679C: \", isMatch + '');\n})));","frontmatter":{"title":{"zh_CN":"自定义渲染逻辑","en_US":"Custom Rendering Logic"},"cols":null,"order":1,"subtitle":null,"type":null},"fields":{"slug":"/components/authorized/demo/customize","path":"/components/authorized/demo/customize.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/components/authorized","demo":"/authorized/demo/"}}}