├── .gitignore ├── LICENSE ├── README.md ├── client.js ├── component ├── interfaceOauth2 │ ├── index.scss │ └── interfaceOauth2.js └── oauth2Content │ ├── index.scss │ └── oauth2Content.js ├── controller └── controller.js ├── index.js ├── model └── oauthModel.js ├── node_modules.tar.gz ├── package-lock.json ├── package.json ├── server.js └── utils └── syncTokenUtil.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # yapi-plugin-interface-oauth2-token 2 | 3 | > 这是一个为了解决yapi管理的项目接口需要做鉴权操作的插件,觉得可以给 star 的欢迎 star 一下，你的 star 是我前进的动力之一。 4 | 5 | ## 主要解决问题 6 | 7 | 针对大多数项目来说，特别是现在的前后端分离的项目，接口通常也需要鉴权，这个插件目的就是为了解决自动获取鉴权token附加在请求上的功能。 8 | 9 | ## 特性 10 | 11 | - 简单易用 12 | - 支持自动定时给所有接口加上一个特定的 `Header` 属性 13 | - 支持多种请求方式和结果获取方式 14 | 15 | ## 版本说明 16 | 17 | ### 1.3.0(2020-10-29) 18 | 19 | - 修复获取路径中解析返回结果中多维数组的问题 20 | - 支持 http url 使用自签名证书 21 | 22 | ### 1.2.3(2020-3-9) 23 | 24 | - 修复获取路径中获取 `header` 简单字符串属性的错误 25 | 26 | ### 1.2.2(2020-3-8) 27 | 28 | - 完善鉴权页面的配置，解决时长校验规则问题 29 | 30 | ### 1.2.0(2020-3-7) 31 | 32 | - 支持配置更细粒度的鉴权请求执行时间，支持分钟级令牌刷新 33 | 34 | ### 1.1.1(2020-2-25) 35 | 36 | - 修改校验成功无明显提示问题 37 | - 修改 `get_token_url` 提交时候的 `bug` 38 | 39 | ### 1.1.0(2020-2-18) 40 | 41 | - 新增支持自定义请求 `Header` 42 | 43 | ### 1.0.1 44 | 45 | - 解决插件的一些 `bug` 46 | 47 | ### 1.0.0 48 | 49 | - 发布正式版本，支持 `GET`、`POST` 等多种方式请求 50 | - 支持定制化结果获取方式 51 | 52 | ## 简单使用 53 | 54 | ### 安装插件 55 | 56 | > 要使用安装插件的yapi，需要先安装 `yapi-cli` 57 | 58 | ```shell 59 | npm install yapi-cli -g 60 | 61 | yapi plugin --name yapi-plugin-interface-oauth2-token 62 | ``` 63 | 64 | ### 升级插件 65 | 66 | 我的升级过程不一定是最好的方法 67 | 68 | 1. 修改 `package.json` 和 `package-lock.json` 中的 `yapi-plugin-interface-oauth2-token` 的版本号为 `1.2.3` 69 | 70 | 2. 删除 `node_modules`，然后重新 `npm install` 71 | 72 | 3. 然后先卸载插件，再重新安装插件 73 | 74 | ```shell 75 | 76 | yapi unplugin --name yapi-plugin-interface-oauth2-token 77 | 78 | yapi plugin --name yapi-plugin-interface-oauth2-token 79 | 80 | ``` 81 | 82 | ### 安装插件如果报错 83 | 84 | 如果安装中报错可以使用我提供的 `node_modules.tar.gz`，下载下来解压到你的 yapi 的 `node_modules` 目录，这个压缩包针对 Linux 和 Node 13 版本 85 | 86 | ```shell 87 | 88 | tar -zvxf node_modules.tar.gz 89 | 90 | #记得把 ./yapi 替换成你真正的目录，必须使用 /bin/cp，不然 -f 参数不会生效 91 | /bin/cp -rf node_modules ./yapi/vendors/ 92 | 93 | # 执行完成之后在 vendors 执行如下命令 94 | ykit pack -m 95 | 96 | # 现在就可以使用命令启动了 97 | node server/app.js 98 | ``` 99 | 100 | ### 配置使用 101 | 102 | 进入项目设置页面，可以看到接口自动鉴权的Tab页 103 | 104 | ![image](https://user-images.githubusercontent.com/20592210/70865694-45395a80-1f9b-11ea-8e84-ec1f6ed5bc81.png) 105 | 106 | 根据不同的环境配置不同的获取token的方式 107 | 108 | - 环境名称： 对应环境配置的列表 109 | - 获取 `token` 的地址： 获取 token 的地址，可以是 `GET` 请求或者是 `POST` 请求 110 | - `token` 有效小时： 我会以定时任务的方式重新获取 `token` 111 | - 请求头字段： 将获取到的结果放入这个环境的哪个 `Header` 字段，比如我这里选择了 `Authorization`，将会把获取到的 `token` 保存到这个属性里 112 | - 获取路径 113 | - 比如你要获取请求体里面的内容，就是 `data.xxx`，记得以 `data` 开头获取请求体内容 114 | - 如果是获取 `header` 的内容请使用 `header.yyy`，可以使用 `+` 作为连接符 115 | - 获取返回结果中的内容请使用 `body.xxx` 116 | 117 | --- 118 | 119 | 关于token请求地址的结果获取： 120 | 121 | 目前我考虑到的场景如下，我会把接口返回数据中的 `token_type` 和 `access_token` 以空格分隔连接起来，所以我会写获取路径是 `body.token_type + " " + body.access_token`, 122 | 123 | ```json 124 | { 125 | "access_token": "27c72286-a4d7-42bc-adef-80980c234494", 126 | "token_type": "bearer", 127 | "refresh_token": "565399c9-a3f3-4594-8460-3194d952b708", 128 | "expires_in": 28799, 129 | "scope": "webapp" 130 | } 131 | ``` 132 | 133 | 结果如图： 134 | 135 | ![2019-06-04_13-53.png](https://i.loli.net/2019/06/04/5cf6077ea6db826842.png) 136 | 137 | ## 重启服务 138 | 139 | 不论你使用什么启动的 `YApi`，你需要重新启动下 140 | 141 | ## 安装失败问题解决 142 | 143 | 如果遇到安装失败的情况，请先用下面的命令卸载插件 144 | 145 | ```shell 146 | yapi unplugin --name yapi-plugin-interface-oauth2-token 147 | ``` 148 | 149 | 进入 `vendors` 目录，执行如下命令手动安装 `node-sass` 150 | 151 | ```shell 152 | npm install node-sass 153 | ``` 154 | 155 | 修改 `package.json` 和 `package-lock.json` 的版本号，再重新安装插件，目前最新版本为 `1.2.3` 156 | 157 | ```shell 158 | yapi plugin --name yapi-plugin-interface-oauth2-token 159 | ``` 160 | 161 | ## 感谢 162 | 163 | - [`eyotang`](https://github.com/eyotang) 164 | - [`Wizard`](https://github.com/lsw1991abc) 165 | -------------------------------------------------------------------------------- /client.js: -------------------------------------------------------------------------------- 1 | import interfaceOauth from './component/interfaceOauth2/interfaceOauth2.js' 2 | 3 | function hander(routers) { 4 | routers.interfaceOauth = { 5 | name: '接口自动鉴权', 6 | component: interfaceOauth 7 | }; 8 | } 9 | 10 | module.exports = function() { 11 | this.bindHook('sub_setting_nav', hander); 12 | }; 13 | -------------------------------------------------------------------------------- /component/interfaceOauth2/index.scss: -------------------------------------------------------------------------------- 1 | .m-env-panel { 2 | // padding-top: 8px; 3 | min-height: 4.68rem; 4 | margin-top: 0; 5 | background-color: #fff; 6 | } 7 | 8 | .project-env{ 9 | min-height: 4.68rem; 10 | .env-icon-style{ 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | .anticon{ 15 | font-size: 15px; 16 | } 17 | } 18 | 19 | .menu-item-checked{ 20 | background-color: #eef7fe; 21 | color: #2395f1; 22 | font-size: 14px; 23 | margin-right: -1px; 24 | border-right: 2px solid #2395f1; 25 | } 26 | 27 | .first-menu-item{ 28 | background-color: #eceef1; 29 | } 30 | 31 | .env-content{ 32 | border-left: 1px solid #ccc; 33 | } 34 | 35 | .ant-menu-item-disabled{ 36 | cursor: pointer; 37 | } 38 | 39 | .env-name{ 40 | width: 150px; 41 | overflow: hidden; 42 | text-overflow: ellipsis; 43 | } 44 | 45 | } -------------------------------------------------------------------------------- /component/interfaceOauth2/interfaceOauth2.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './index.scss'; 4 | import { Layout, message, Row } from 'antd'; 5 | const { Content, Sider } = Layout; 6 | import ProjectEnvContent from '../oauth2Content/oauth2Content'; 7 | 8 | import { connect } from 'react-redux'; 9 | import { updateEnv, getProject, getEnv } from 'client/reducer/modules/project'; 10 | import axios from 'axios'; 11 | 12 | @connect( 13 | state => { 14 | return { 15 | projectMsg: state.project.currProject 16 | }; 17 | }, 18 | { 19 | updateEnv, 20 | getProject, 21 | getEnv 22 | } 23 | ) 24 | class ProjectInterfaceOauth extends Component { 25 | static propTypes = { 26 | projectId: PropTypes.number, 27 | updateEnv: PropTypes.func, 28 | getProject: PropTypes.func, 29 | projectMsg: PropTypes.object, 30 | getEnv: PropTypes.func 31 | }; 32 | 33 | constructor(props) { 34 | super(props); 35 | this.state = { 36 | env: [], 37 | _id: null, 38 | currentEnvMsg: {}, 39 | delIcon: null, 40 | currentKey: -2, 41 | currOauth: {}, 42 | projectAllOauth: [] 43 | }; 44 | } 45 | 46 | initState(curdata, id) { 47 | let newValue = {}; 48 | newValue['env'] = [].concat(curdata); 49 | newValue['_id'] = id; 50 | this.setState({ 51 | ...this.state, 52 | ...newValue 53 | }); 54 | } 55 | 56 | async componentWillMount() { 57 | this._isMounted = true; 58 | await this.props.getProject(this.props.projectId); 59 | await this.getOauthData(); 60 | const { env, _id } = this.props.projectMsg; 61 | this.initState(env, _id); 62 | this.handleClick(0, env[0]); 63 | } 64 | 65 | componentWillUnmount() { 66 | this._isMounted = false; 67 | } 68 | 69 | handleClick = (key, data) => { 70 | this.setCurOauth(data._id); 71 | this.setState({ 72 | currentEnvMsg: data, 73 | currentKey: key 74 | }); 75 | }; 76 | 77 | setCurOauth(envId) { 78 | let currOauth = {}; 79 | if (!this.state.projectAllOauth) { 80 | this.setState({ 81 | currOauth: currOauth 82 | }); 83 | return; 84 | } 85 | 86 | for (let i = 0; i < this.state.projectAllOauth.length; i++) { 87 | if ( 88 | this.state.projectAllOauth[i].env_id && 89 | this.state.projectAllOauth[i].env_id == envId 90 | ) { 91 | currOauth = this.state.projectAllOauth[i]; 92 | break; 93 | } 94 | } 95 | this.setState({ 96 | currOauth: currOauth 97 | }); 98 | } 99 | 100 | async getOauthData() { 101 | let result = await axios.get('/api/plugin/oauthInterface/project/all?project_id=' + this.props.projectId); 102 | if (result.data.errcode === 0) { 103 | if (result.data.data) { 104 | this.setState({ 105 | projectAllOauth: result.data.data 106 | }); 107 | } 108 | } 109 | } 110 | 111 | enterItem = key => { 112 | this.setState({ delIcon: key }); 113 | }; 114 | 115 | //保存设置 116 | async onSave(assignValue) { 117 | await axios 118 | .post('/api/plugin/oauthInterface/save', assignValue) 119 | .then(res => { 120 | if (res.data.errcode === 0) { 121 | message.success('保存成功'); 122 | this.getOauthData(); 123 | } else { 124 | message.error(res.data.errmsg); 125 | } 126 | }); 127 | } 128 | 129 | //提交保存信息 130 | onSubmit = value => { 131 | let assignValue = value; 132 | assignValue['project_id'] = this.state._id; 133 | assignValue['u_id'] = this.props.projectMsg.uid; 134 | this.onSave(assignValue); 135 | }; 136 | 137 | // 动态修改环境名称 138 | handleInputChange = (value, currentKey) => { 139 | let newValue = [].concat(this.state.env); 140 | newValue[currentKey].name = value || '新环境'; 141 | this.setState({ env: newValue }); 142 | }; 143 | 144 | render() { 145 | const { env, currentKey } = this.state; 146 | 147 | const envSettingItems = env.map((item, index) => { 148 | return ( 149 | this.handleClick(index, item)} 155 | onMouseEnter={() => this.enterItem(index)} 156 | > 157 | 158 | 162 | {item.name} 163 | 164 | 165 | 166 | ); 167 | }); 168 | 169 | return ( 170 |
171 | 172 | 173 |
174 | 175 |
176 |

环境列表

177 |
178 | 179 | {envSettingItems} 180 |
181 | 182 | 183 | 191 | this.onSubmit(e)} 196 | handleEnvInput={e => this.handleInputChange(e, currentKey)} 197 | /> 198 | 199 | 200 | 201 |
202 | ); 203 | } 204 | } 205 | 206 | export default ProjectInterfaceOauth; 207 | -------------------------------------------------------------------------------- /component/oauth2Content/index.scss: -------------------------------------------------------------------------------- 1 | .m-env-panel { 2 | // padding-top: 8px; 3 | min-height: 4.68rem; 4 | margin-top: 0; 5 | background-color: #fff; 6 | } 7 | 8 | .project-env { 9 | min-height: 4.68rem; 10 | 11 | .env-icon-style { 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | 16 | .anticon { 17 | font-size: 15px; 18 | } 19 | } 20 | 21 | .menu-item { 22 | padding: 0 16px; 23 | font-size: 13px; 24 | line-height: 42px; 25 | height: 42px; 26 | overflow: hidden; 27 | text-overflow: ellipsis; 28 | cursor: pointer; 29 | 30 | } 31 | 32 | .menu-item-checked { 33 | background-color: #eef7fe; 34 | color: #2395f1; 35 | font-size: 14px; 36 | margin-right: -1px; 37 | border-right: 2px solid #2395f1; 38 | } 39 | 40 | .first-menu-item { 41 | background-color: #eceef1; 42 | } 43 | 44 | .delete { 45 | font-size: 20px; 46 | top: 8px; 47 | } 48 | 49 | .env-content { 50 | border-left: 1px solid #ccc; 51 | } 52 | 53 | .ant-menu-item-disabled { 54 | cursor: pointer; 55 | } 56 | 57 | .m-empty-prompt { 58 | display: flex; 59 | height: 400px; 60 | 61 | span { 62 | margin: auto; 63 | font-size: 16px; 64 | 65 | .anticon { 66 | padding-right: 16px; 67 | font-size: 24px; 68 | } 69 | } 70 | } 71 | 72 | .env-label { 73 | padding-bottom: 8px; 74 | 75 | a { 76 | color: #636363; 77 | } 78 | } 79 | 80 | .env-last-row { 81 | display: none; 82 | } 83 | 84 | .env-name { 85 | width: 150px; 86 | overflow: hidden; 87 | text-overflow: ellipsis; 88 | } 89 | 90 | .btnwrap-changeproject { 91 | text-align: center; 92 | padding: .16rem 0; 93 | background: #fff; 94 | background-color: #fff; 95 | margin: 0 -.4rem; 96 | background-size: 4px 4px; 97 | } 98 | 99 | .editable-cell { 100 | position: relative; 101 | } 102 | 103 | .editable-cell-value-wrap { 104 | padding: 5px 12px; 105 | cursor: pointer; 106 | } 107 | 108 | .editable-row:hover .editable-cell-value-wrap { 109 | border: 1px solid #d9d9d9; 110 | border-radius: 4px; 111 | padding: 4px 11px; 112 | } 113 | 114 | .ant-table-tbody tr td { 115 | padding: 10px 15px; 116 | } 117 | } -------------------------------------------------------------------------------- /component/oauth2Content/oauth2Content.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './index.scss'; 4 | import { formatTime } from 'client/common.js'; 5 | import { 6 | Form, 7 | Input, 8 | Button, 9 | AutoComplete, 10 | InputNumber, 11 | Switch, 12 | Tooltip, 13 | Icon, 14 | Row, 15 | Col, 16 | Select, 17 | Tabs, 18 | Table, 19 | Popconfirm, 20 | Radio, 21 | message 22 | } from 'antd'; 23 | const FormItem = Form.Item; 24 | import constants from 'client/constants/variable.js'; 25 | import axios from 'axios'; 26 | 27 | const { Option } = Select; 28 | const { TabPane } = Tabs; 29 | const { TextArea } = Input; 30 | 31 | // layout 32 | const formItemLayout = { 33 | labelCol: { 34 | lg: { span: 5 }, 35 | xs: { span: 8 }, 36 | sm: { span: 8 } 37 | }, 38 | wrapperCol: { 39 | lg: { span: 17 }, 40 | xs: { span: 16 }, 41 | sm: { span: 16 } 42 | }, 43 | className: 'form-item' 44 | }; 45 | 46 | class OAuth2Content extends Component { 47 | static propTypes = { 48 | projectId: PropTypes.number, 49 | envMsg: PropTypes.object, 50 | oauthData: PropTypes.object, 51 | form: PropTypes.object, 52 | onSubmit: PropTypes.func, 53 | handleEnvInput: PropTypes.func 54 | }; 55 | 56 | constructor(props) { 57 | super(props); 58 | this.state = { 59 | oauth_data: {}, 60 | paramsAddId: '', 61 | dataAddId: '', 62 | headersAddId: '' 63 | }; 64 | } 65 | 66 | handleInit(data) { 67 | this.props.form.resetFields(); 68 | if (data.is_oauth_open == null) { 69 | data.is_oauth_open = false; 70 | } 71 | if (!data.token_valid_unit) { 72 | data.token_valid_unit = 'hour'; 73 | } 74 | let { 75 | add_time, 76 | env_id, 77 | env_name, 78 | get_token_url, 79 | is_oauth_open, 80 | project_id, 81 | token_header, 82 | token_valid_hour, 83 | up_time, 84 | _id, 85 | request_type, 86 | params, 87 | form_data, 88 | headers_data 89 | } = data; 90 | if (request_type) { 91 | let paramsAddId, dataAddId, headersAddId; 92 | if (headers_data) { 93 | headersAddId = 94 | headers_data.length === 0 ? 1 : headers_data[headers_data.length - 1].addId; 95 | } else { 96 | headersAddId = 1; 97 | } 98 | // 兼容以前的配置 99 | if (headers_data && headers_data.length == 0) { 100 | data.headers_data = [ 101 | { 102 | keyName: '', 103 | value: '', 104 | flag: { keyFlag: false, valueFlag: false }, 105 | addId: 1 106 | } 107 | ] 108 | } 109 | 110 | if (request_type === 'GET') { 111 | paramsAddId = params.length === 0 ? 1 : params[params.length - 1].addId; 112 | } else { 113 | dataAddId = 114 | form_data.length === 0 ? 1 : form_data[form_data.length - 1].addId; 115 | } 116 | this.setState({ 117 | oauth_data: data, 118 | paramsAddId: paramsAddId || 1, 119 | dataAddId: dataAddId || 1, 120 | headersAddId: headersAddId || 1 121 | }); 122 | } else { 123 | this.setState({ 124 | oauth_data: { 125 | add_time, 126 | env_id, 127 | env_name, 128 | get_token_url, 129 | is_oauth_open, 130 | project_id, 131 | token_header, 132 | token_valid_hour, 133 | token_valid_unit: 'hour', 134 | up_time, 135 | _id, 136 | last_get_time: null, 137 | request_type: 'GET', 138 | params: [ 139 | { 140 | keyName: '', 141 | value: '', 142 | flag: { keyFlag: false, valueFlag: false }, 143 | addId: 1 144 | } 145 | ], 146 | data_json: '', 147 | form_data: [ 148 | { 149 | keyName: '', 150 | value: '', 151 | flag: { keyFlag: false, valueFlag: false }, 152 | addId: 1 153 | } 154 | ], 155 | headers_data: [ 156 | { 157 | keyName: '', 158 | value: '', 159 | flag: { keyFlag: false, valueFlag: false }, 160 | addId: 1 161 | } 162 | ], 163 | token_path: '', 164 | dataType: 'data_json' 165 | }, 166 | paramsAddId: 1, 167 | dataAddId: 1, 168 | headersAddId: 1 169 | }); 170 | } 171 | } 172 | 173 | componentWillReceiveProps(nextProps) { 174 | let curEnvName = this.props.envMsg.name; 175 | let nextEnvName = nextProps.envMsg.name; 176 | if (curEnvName !== nextEnvName) { 177 | this.handleInit(nextProps.oauthData); 178 | } 179 | } 180 | 181 | handleOk = e => { 182 | e.preventDefault(); 183 | const { form, onSubmit, envMsg } = this.props; 184 | form.validateFields((err, values) => { 185 | if (!err) { 186 | let assignValue = this.state.oauth_data; 187 | values.oauth_data.env_id = envMsg._id; 188 | assignValue = Object.assign(assignValue, values.oauth_data); 189 | // 因为路径 url 没有在FormItem 中，所以设置为 state 中的值 190 | assignValue.get_token_url = this.state.oauth_data.get_token_url; 191 | onSubmit(assignValue); 192 | } 193 | }); 194 | }; 195 | 196 | // 是否开启 197 | onChange = v => { 198 | let oauth_data = this.state.oauth_data; 199 | oauth_data.is_oauth_open = v; 200 | this.setState({ 201 | oauth_data: oauth_data 202 | }); 203 | }; 204 | 205 | validGetTokenUrlValid = async (rule, value, callback) => { 206 | const { 207 | get_token_url, 208 | is_oauth_open, 209 | request_type, 210 | params, 211 | data_json, 212 | form_data, 213 | dataType, 214 | headers_data 215 | } = this.state.oauth_data; 216 | if (!is_oauth_open) { 217 | callback(); 218 | return; 219 | } 220 | try { 221 | let res = await axios.post('/api/plugin/oauthInterface/url/valid', { 222 | url: get_token_url, 223 | method: request_type, 224 | headers_data: headers_data, 225 | dataType, 226 | params, 227 | form_data, 228 | data_json 229 | }); 230 | if (res.data.errcode == 0) { 231 | message.success('路径校验成功'); 232 | } 233 | if (res.data.errcode == 402) { 234 | callback('获取token地址不正确'); 235 | } 236 | } catch (e) { 237 | callback('获取token地址不正确'); 238 | } 239 | callback(); 240 | }; 241 | 242 | //修改path类型 243 | handleChange = value => { 244 | this.setState(state => { 245 | return (state.oauth_data.request_type = value); 246 | }); 247 | }; 248 | 249 | //删除 250 | handleDelete = (type, id) => { 251 | const { params, form_data, headers_data } = this.state.oauth_data; 252 | if (type === 'params') { 253 | const currentData = params.filter(item => item.addId !== id); 254 | const currentId = params[params.length - 1].addId; 255 | this.setState(state => { 256 | return ( 257 | (state.oauth_data.params = currentData), 258 | (state.paramsAddId = currentId) 259 | ); 260 | }); 261 | } else if (type === 'form_data') { 262 | const currentData = form_data.filter(item => item.addId !== id); 263 | const currentId = form_data[form_data.length - 1].addId; 264 | this.setState(state => { 265 | return ( 266 | (state.oauth_data.form_data = currentData), 267 | (state.dataAddId = currentId) 268 | ); 269 | }); 270 | } else if (type === 'headers_data') { 271 | const currentData = headers_data.filter(item => item.addId !== id); 272 | const currentId = headers_data[headers_data.length - 1].addId; 273 | this.setState(state => { 274 | return ( 275 | (state.oauth_data.headers_data = currentData), 276 | (state.headersAddId = currentId) 277 | ); 278 | }); 279 | } 280 | }; 281 | 282 | configAdd = () => { 283 | const { count, dataSource } = this.state; 284 | const newData = { 285 | key: count, 286 | name: `Edward King ${count}`, 287 | age: 32, 288 | address: `London, Park Lane no. ${count}` 289 | }; 290 | this.setState({ 291 | dataSource: [...dataSource, newData], 292 | count: count + 1 293 | }); 294 | }; 295 | 296 | handleSave = row => { 297 | const newData = [...this.state.dataSource]; 298 | const index = newData.findIndex(item => row.key === item.key); 299 | const item = newData[index]; 300 | newData.splice(index, 1, { 301 | ...item, 302 | ...row 303 | }); 304 | this.setState({ dataSource: newData }); 305 | }; 306 | //修改内容转成文本 307 | editValue(type, whoEdit, index) { 308 | this.setState(state => { 309 | return (state.oauth_data[type][index].flag[whoEdit] = true); 310 | }); 311 | } 312 | //修改完成转回表格 313 | cancelEdit(type, whoEdit, index) { 314 | this.setState(state => { 315 | return (state.oauth_data[type][index].flag[whoEdit] = false); 316 | }); 317 | this.forceUpdate(); 318 | } 319 | //修改值 320 | changeData(type, whoEdit, addId, index, e) { 321 | const { paramsAddId, dataAddId, headersAddId, oauth_data } = this.state; 322 | if (type === 'params' && paramsAddId === addId) { 323 | const currentId = addId + 1; 324 | const currentData = [ 325 | ...oauth_data.params, 326 | { 327 | keyName: '', 328 | value: '', 329 | flag: { keyFlag: false, valueFlag: false }, 330 | addId: currentId 331 | } 332 | ]; 333 | this.setState(state => { 334 | return ( 335 | (state.oauth_data.params = currentData), 336 | (state.paramsAddId = currentId) 337 | ); 338 | }); 339 | } else if (type === 'form_data' && dataAddId === addId) { 340 | const currentId = addId + 1; 341 | const currentData = [ 342 | ...oauth_data.form_data, 343 | { 344 | keyName: '', 345 | value: '', 346 | flag: { keyFlag: false, valueFlag: false }, 347 | addId: currentId 348 | } 349 | ]; 350 | this.setState(state => { 351 | return ( 352 | (state.oauth_data.form_data = currentData), 353 | (state.dataAddId = currentId) 354 | ); 355 | }); 356 | } else if (type === 'headers_data' && headersAddId === addId) { 357 | const currentId = addId + 1; 358 | const currentData = [ 359 | ...oauth_data.headers_data, 360 | { 361 | keyName: '', 362 | value: '', 363 | flag: { keyFlag: false, valueFlag: false }, 364 | addId: currentId 365 | } 366 | ]; 367 | this.setState(state => { 368 | return ( 369 | (state.oauth_data.headers_data = currentData), 370 | (state.headersAddId = currentId) 371 | ); 372 | }); 373 | } 374 | const value = e.target.value; 375 | this.setState(state => { 376 | return (state.oauth_data[type][index][whoEdit] = value); 377 | }); 378 | } 379 | //更改data的类型 380 | changeDataType = e => { 381 | const type = e.target.value; 382 | this.setState(state => { 383 | return (state.oauth_data.dataType = type); 384 | }); 385 | }; 386 | changeJson = e => { 387 | const value = e.target.value; 388 | this.setState(state => { 389 | return (state.oauth_data.data_json = value); 390 | }); 391 | }; 392 | changeUrl = e => { 393 | const url = e.target.value; 394 | this.setState(state => { 395 | return (state.oauth_data.get_token_url = url); 396 | }); 397 | }; 398 | handleValidUnitChange = value => { 399 | this.setState(state => { 400 | return (state.oauth_data.token_valid_unit = value); 401 | }); 402 | }; 403 | render() { 404 | const { envMsg } = this.props; 405 | const { getFieldDecorator } = this.props.form; 406 | const { oauth_data } = this.state; 407 | const { 408 | is_oauth_open, 409 | last_get_time, 410 | get_token_url, 411 | request_type, 412 | params, 413 | dataType, 414 | data_json, 415 | form_data, 416 | token_valid_hour, 417 | token_valid_unit, 418 | token_header, 419 | token_path, 420 | headers_data 421 | } = oauth_data; 422 | const getColumns = [ 423 | { 424 | title: 'KEY', 425 | dataIndex: 'keyName', 426 | width: '40%', 427 | render: (text, record, index) => 428 | record.flag.keyFlag ? ( 429 | 432 | this.changeData('params', 'keyName', record.addId, index, e) 433 | } 434 | onBlur={() => this.cancelEdit('params', 'keyFlag', index)} 435 | /> 436 | ) : ( 437 |
this.editValue('params', 'keyFlag', index)} 440 | > 441 | {text} 442 |
443 | ) 444 | }, 445 | { 446 | title: 'VALUE', 447 | dataIndex: 'value', 448 | width: '40%', 449 | render: (text, record, index) => 450 | record.flag.valueFlag ? ( 451 | 454 | this.changeData('params', 'value', record.addId, index, e) 455 | } 456 | onBlur={() => this.cancelEdit('params', 'valueFlag', index)} 457 | /> 458 | ) : ( 459 |
this.editValue('params', 'valueFlag', index)} 462 | > 463 | {text} 464 |
465 | ) 466 | }, 467 | { 468 | title: 'operation', 469 | dataIndex: 'operation', 470 | width: '15%', 471 | render: (text, record) => 472 | params.length >= 1 ? ( 473 | this.handleDelete('params', record.addId)} 476 | > 477 | Delete 478 | 479 | ) : null 480 | } 481 | ]; 482 | const postColumns = [ 483 | { 484 | title: 'KEY', 485 | dataIndex: 'keyName', 486 | width: '40%', 487 | render: (text, record, index) => 488 | record.flag.keyFlag ? ( 489 | 492 | this.changeData('form_data', 'keyName', record.addId, index, e) 493 | } 494 | onBlur={() => this.cancelEdit('form_data', 'keyFlag', index)} 495 | /> 496 | ) : ( 497 |
this.editValue('form_data', 'keyFlag', index)} 500 | > 501 | {text} 502 |
503 | ) 504 | }, 505 | { 506 | title: 'VALUE', 507 | dataIndex: 'value', 508 | width: '40%', 509 | render: (text, record, index) => 510 | record.flag.valueFlag ? ( 511 | 514 | this.changeData('form_data', 'value', record.addId, index, e) 515 | } 516 | onBlur={() => this.cancelEdit('form_data', 'valueFlag', index)} 517 | /> 518 | ) : ( 519 |
this.editValue('form_data', 'valueFlag', index)} 522 | > 523 | {text} 524 |
525 | ) 526 | }, 527 | { 528 | title: 'operation', 529 | dataIndex: 'operation', 530 | width: '15%', 531 | height: '65px', 532 | render: (text, record) => 533 | form_data.length >= 1 ? ( 534 | this.handleDelete('form_data', record.addId)} 537 | > 538 | Delete 539 | 540 | ) : null 541 | } 542 | ]; 543 | const headerColumns = [ 544 | { 545 | title: 'KEY', 546 | dataIndex: 'keyName', 547 | width: '40%', 548 | render: (text, record, index) => 549 | record.flag.keyFlag ? ( 550 | 553 | this.changeData('headers_data', 'keyName', record.addId, index, e) 554 | } 555 | onBlur={() => this.cancelEdit('headers_data', 'keyFlag', index)} 556 | /> 557 | ) : ( 558 |
this.editValue('headers_data', 'keyFlag', index)} 561 | > 562 | {text} 563 |
564 | ) 565 | }, 566 | { 567 | title: 'VALUE', 568 | dataIndex: 'value', 569 | width: '40%', 570 | render: (text, record, index) => 571 | record.flag.valueFlag ? ( 572 | 575 | this.changeData('headers_data', 'value', record.addId, index, e) 576 | } 577 | onBlur={() => this.cancelEdit('headers_data', 'valueFlag', index)} 578 | /> 579 | ) : ( 580 |
this.editValue('headers_data', 'valueFlag', index)} 583 | > 584 | {text} 585 |
586 | ) 587 | }, 588 | { 589 | title: 'operation', 590 | dataIndex: 'operation', 591 | width: '15%', 592 | height: '65px', 593 | render: (text, record) => 594 | form_data.length >= 1 ? ( 595 | this.handleDelete('headers_data', record.addId)} 598 | > 599 | Delete 600 | 601 | ) : null 602 | } 603 | ]; 604 | const envTpl = data => { 605 | return ( 606 |
607 | 608 | {getFieldDecorator('oauth_data.env_name', { 609 | validateTrigger: ['onChange', 'onBlur'], 610 | initialValue: data.name === '新环境' ? '' : data.name || '' 611 | })( 612 | 617 | )} 618 | 619 | 620 | 626 | {last_get_time != null ? ( 627 |
628 | 上次更新时间: 629 | 630 | {formatTime(this.state.oauth_data.last_get_time)} 631 | 632 |
633 | ) : null} 634 | 635 | 639 | 获取token的地址  640 | 641 | 642 | 643 | 644 | } 645 | > 646 | 647 | 648 | 656 | 657 | 658 | 659 | 660 | 661 | {getFieldDecorator('oauth_data.get_token_url', { 662 | rules: [ 663 | { 664 | required: true, 665 | message: '请输入获取token的地址' 666 | }, 667 | { 668 | validator: this.validGetTokenUrlValid 669 | } 670 | ], 671 | validateTrigger: 'onClick', 672 | initialValue: get_token_url 673 | })( 674 | 677 | )} 678 | 679 | 680 | 681 | 682 | 'editable-row'} 684 | bordered 685 | dataSource={headers_data} 686 | columns={headerColumns} 687 | rowKey="addId" 688 | /> 689 | 690 | 691 | 692 | 693 | 694 |
'editable-row'} 696 | bordered 697 | dataSource={params} 698 | columns={getColumns} 699 | rowKey="addId" 700 | /> 701 | 702 | 703 | 704 | 705 | raw 706 | form-data 707 | 708 | {dataType === 'data_json' ? ( 709 |