feature:登录功能添加token校验

.eslintrc.js

+module.exports = {
+  root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找
+  env: {
+    node: true,
+  },
+  // "off" -> 0 关闭规则    "warn" -> 1 开启警告规则    "error" -> 2 开启错误规则
+  rules: {
+    'generator-star-spacing': 'off',
+    'no-tabs': 'off',
+    'no-unused-vars': 'off', //声明的变量未使用
+    'no-console': 'off',
+    'no-irregular-whitespace': 'off',
+    'no-debugger': 'off',
+    eqeqeq: 'off', // 使用全等
+  },
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 7,
+    sourceType: 'module',
+  },
+};

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "experimentalDecorators": true,
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
+}

src/routes/Home/IndicationDetails/index.js

 import React, { Component } from 'react'
 import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import './index.css'
 import qs from 'qs'
 const { Title } = Typography

src/routes/Home/LigandDetails/index.js

@@ -18,7 +18,7 @@ import {
   Menu,
   Dropdown,
 } from 'antd'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from 'molstar-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'

src/routes/Home/MutationDetails/index.js

@@ -20,7 +20,7 @@ import {
   Select,
 } from 'antd'
 import WrappedIframe from '../../../components/iframePdb'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from 'molstar-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'

src/routes/Home/SearchDetails/index.js

@@ -23,7 +23,7 @@ import {
   Dropdown,
 } from 'antd'
 import WrappedIframe from '../../../components/iframePdb'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from 'molstar-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'

src/routes/Home/SearchList/index.js

 import React, { Component } from 'react'
 import { Jsme } from 'jsme-react'
 import { Card, Button, Pagination, Tabs, Spin, message, Tag } from 'antd'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import qs from 'qs'
 import './index.css'
 const { TabPane } = Tabs

src/routes/Home/TargetDetails/index.js

@@ -22,7 +22,7 @@ import {
   Pagination,
 } from 'antd'
 import WrappedIframe from '../../../components/iframePdb'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from 'molstar-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'

src/routes/Home/index.js

-import React from 'react'
-import {
-  Form,
-  Input,
-  Button,
-  Select,
-  Tabs,
-  message,
-  Radio,
-  Checkbox,
-  Row,
-  Col,
-} from 'antd'
-import LogoTitlte from '../../components/LogoTitlte/index'
-import { Jsme } from 'jsme-react'
-import qs from 'qs'
-import { request } from '../../utils/request'
-import './style.css'
-const { TabPane } = Tabs
-const { Option } = Select
+import React from 'react';
+import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col } from 'antd';
+import LogoTitlte from '../../components/LogoTitlte/index';
+import { Jsme } from 'jsme-react';
+import qs from 'qs';
+import request from '../../utils/request';
+import './style.css';
+const { TabPane } = Tabs;
+const { Option } = Select;
 class Home extends React.Component {
   state = {
     select_db: 'Ligands',
@@ -77,586 +66,516 @@ class Home extends React.Component {
     TargetChildClassList: [],
     compoundList: ['DrugName', 'Smiles'],
     targetList: ['TargetName', 'UniprotId'],
-    optionsList: [
-      { label: '查询drug相关靶点', value: 1 },
-      { label: '查询ligand相关靶点', value: 2, disabled: false },
-      { label: '是否有PDB结构', value: 3 },
-    ],
-  }
+    optionsList: [{ label: '查询drug相关靶点', value: 1 }, { label: '查询ligand相关靶点', value: 2, disabled: false }, { label: '是否有PDB结构', value: 3 }],
+  };
   // Mutation
   CheckChange = (e) => {
-    console.log(e)
-    let MutationSearchData = this.state.MutationSearchData
-    MutationSearchData.idselect_data = e
-    this.setState(() => ({ MutationSearchData: MutationSearchData }))
-  }
+    console.log(e);
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.idselect_data = e;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+  };
   onAllChange = (e) => {
     if (e.target.checked) {
-      let MutationSearchData = this.state.MutationSearchData
-      let all_idselect_data = [
-        'TM1',
-        'TM4',
-        'TM7',
-        'ICL3',
-        'ECL3',
-        'N-Term',
-        'ECL1',
-        'ICL1',
-        'TM5',
-        'TM2',
-        'TM3',
-        'TM6',
-        'ICL2',
-        'ECL2',
-        'C-Term',
-      ]
-      MutationSearchData.idselect_data = all_idselect_data
-      this.setState(() => ({ MutationSearchData: MutationSearchData }))
+      let MutationSearchData = this.state.MutationSearchData;
+      let all_idselect_data = ['TM1', 'TM4', 'TM7', 'ICL3', 'ECL3', 'N-Term', 'ECL1', 'ICL1', 'TM5', 'TM2', 'TM3', 'TM6', 'ICL2', 'ECL2', 'C-Term'];
+      MutationSearchData.idselect_data = all_idselect_data;
+      this.setState(() => ({ MutationSearchData: MutationSearchData }));
     } else {
-      let MutationSearchData = this.state.MutationSearchData
-      let all_idselect_data = []
-      MutationSearchData.idselect_data = all_idselect_data
-      this.setState(() => ({ MutationSearchData: MutationSearchData }))
+      let MutationSearchData = this.state.MutationSearchData;
+      let all_idselect_data = [];
+      MutationSearchData.idselect_data = all_idselect_data;
+      this.setState(() => ({ MutationSearchData: MutationSearchData }));
     }
-  }
+  };
   getMutationList = () => {
-    let data = JSON.parse(JSON.stringify(this.state.MutationSearchData))
+    let data = JSON.parse(JSON.stringify(this.state.MutationSearchData));
     if (data.target_class == '' && data.target_data == '') {
-      return message.warning('请输入查询条件！')
+      return message.warning('请输入查询条件！');
     }
-    this.setState(() => ({ loading: true }))
+    this.setState(() => ({ loading: true }));
     request
       .post('/gpcr/mutation_search', data)
       .then((res) => {
-        this.setState(() => ({ loading: false }))
+        this.setState(() => ({ loading: false }));
         if (res.data.code === 200) {
-          console.log(data)
+          console.log(data);
           this.props.history.push({
             pathname: '/home/SearchList',
             search: qs.stringify(data),
-          })
+          });
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
       })
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   childClassChange3 = (e) => {
-    console.log(e)
-    let MutationSearchData = this.state.MutationSearchData
-    MutationSearchData.target_families = e
-    this.setState(() => ({ MutationSearchData: MutationSearchData }))
-  }
+    console.log(e);
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.target_families = e;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+  };
   getClassData3 = (e) => {
-    console.log(e)
-    this.setState(() => ({ classData: e }))
-    let MutationSearchData = this.state.MutationSearchData
-    MutationSearchData.target_class = e
-    this.setState(() => ({ MutationSearchData: MutationSearchData }))
-    let value = this.state.allClassList
-    let childData = value[e]
-    console.log(childData)
-    this.setState(() => ({ childClassList: childData }))
-  }
+    console.log(e);
+    this.setState(() => ({ classData: e }));
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.target_class = e;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+    let value = this.state.allClassList;
+    let childData = value[e];
+    console.log(childData);
+    this.setState(() => ({ childClassList: childData }));
+  };
   getMutationValue = (e) => {
-    const { value } = e.target
-    let MutationSearchData = this.state.MutationSearchData
-    MutationSearchData.target_data = value
-    this.setState(() => ({ MutationSearchData: MutationSearchData }))
-  }
+    const { value } = e.target;
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.target_data = value;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+  };
   getChemblValue = (e) => {
-    const { value } = e.target
-    let MutationSearchData = this.state.MutationSearchData
-    MutationSearchData.chembl_id = value
-    this.setState(() => ({ MutationSearchData: MutationSearchData }))
-  }
+    const { value } = e.target;
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.chembl_id = value;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+  };
   // Indication
 
   getIndicationValue = (e) => {
-    const { value } = e.target
-    let IndicationSearchData = this.state.IndicationSearchData
-    IndicationSearchData.indication = value
-    this.setState(() => ({ IndicationSearchData: IndicationSearchData }))
-  }
+    const { value } = e.target;
+    let IndicationSearchData = this.state.IndicationSearchData;
+    IndicationSearchData.indication = value;
+    this.setState(() => ({ IndicationSearchData: IndicationSearchData }));
+  };
   getIndicationList = () => {
-    let data = this.state.IndicationSearchData
+    let data = this.state.IndicationSearchData;
     if (data.indication == '') {
-      return message.warning('请输入查询条件！')
+      return message.warning('请输入查询条件！');
     }
-    this.setState(() => ({ loading: true }))
+    this.setState(() => ({ loading: true }));
     request
       .post('/gpcr/indication_search', data)
       .then((res) => {
-        this.setState(() => ({ loading: false }))
+        this.setState(() => ({ loading: false }));
         if (res.data.code === 200) {
           this.props.history.push({
             pathname: '/home/IndicationDetails',
             search: qs.stringify(data),
-          })
+          });
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
       })
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
 
   // ligend
   getLigendValue = (e) => {
-    const { value } = e.target
-    let ligandSearchData = this.state.ligandSearchData
-    ligandSearchData.ligand_data = value
-    this.setState(() => ({ ligandSearchData: ligandSearchData }))
-  }
+    const { value } = e.target;
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.ligand_data = value;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+  };
 
   logSmiles2 = (e) => {
-    let ligandSearchData = this.state.ligandSearchData
-    ligandSearchData.ligand_data = e
-    this.setState(() => ({ ligandSearchData: ligandSearchData }))
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.ligand_data = e;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
     // this.setState(()=>({data:e }))
-  }
+  };
   getLigendList = () => {
-    let data = this.state.ligandSearchData
+    let data = this.state.ligandSearchData;
     if (data.ligand_data == '') {
-      return message.warning('请输入查询条件！')
+      return message.warning('请输入查询条件！');
     }
 
-    this.setState(() => ({ loading: true }))
+    this.setState(() => ({ loading: true }));
     request
       .post('/gpcr/ligand_search', data)
       .then((res) => {
-        console.log(res)
-        this.setState(() => ({ loading: false }))
+        console.log(res);
+        this.setState(() => ({ loading: false }));
         if (res.data.code === 200) {
           this.props.history.push({
             pathname: '/home/SearchList',
             search: qs.stringify(data),
-          })
+          });
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
       })
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   getLigandData = (e) => {
-    const { value } = e.target
-    let ligandSearchData = this.state.ligandSearchData
-    ligandSearchData.target_data = value
-    this.setState(() => ({ ligandSearchData: ligandSearchData }))
-  }
+    const { value } = e.target;
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.target_data = value;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+  };
   ligandChange = (e) => {
-    let ligandSearchData = this.state.ligandSearchData
-    ligandSearchData.target_type = e
-    this.setState(() => ({ ligandSearchData: ligandSearchData }))
-  }
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.target_type = e;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+  };
   childClassChange2 = (e) => {
-    console.log(e)
-    let ligandSearchData = this.state.ligandSearchData
-    ligandSearchData.target_families = e
-    this.setState(() => ({ ligandSearchData: ligandSearchData }))
-  }
+    console.log(e);
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.target_families = e;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+  };
   getClassData2 = (e) => {
-    console.log(e)
-    this.setState(() => ({ classData: e }))
-    let ligandSearchData = this.state.ligandSearchData
-    ligandSearchData.target_class = e
-    this.setState(() => ({ ligandSearchData: ligandSearchData }))
-    let value = this.state.allClassList
-    let childData = value[e]
-    console.log(childData)
-    this.setState(() => ({ childClassList: childData }))
-  }
+    console.log(e);
+    this.setState(() => ({ classData: e }));
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.target_class = e;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+    let value = this.state.allClassList;
+    let childData = value[e];
+    console.log(childData);
+    this.setState(() => ({ childClassList: childData }));
+  };
   // Target
   getTargetClassData = (e) => {
-    this.setState(() => ({ classData: e }))
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.target_class = e
-    this.setState(() => ({ TargetSearchData: TargetSearchData }))
-    let value = this.state.TargetClassList
+    this.setState(() => ({ classData: e }));
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.target_class = e;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+    let value = this.state.TargetClassList;
     value.map((item) => {
       if (item.name === e) {
-        this.setState(() => ({ TargetChildClassList: item.content }))
+        this.setState(() => ({ TargetChildClassList: item.content }));
       }
-    })
+    });
 
     // let childData=value[e]
     // console.log(childData);
     // this.setState(()=>({childClassList:childData}))
-  }
+  };
   childTargetClassChange = (e) => {
-    console.log(e)
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.target_families = e
-    this.setState(() => ({ TargetSearchData: TargetSearchData }))
-  }
+    console.log(e);
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.target_families = e;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
   targetChange = (e) => {
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.target_type = e
-    this.setState(() => ({ TargetSearchData: TargetSearchData }))
-  }
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.target_type = e;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
   getindTargetication = (e) => {
-    const { value } = e.target
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.indication = value
-    this.setState(() => ({ TargetSearchData: TargetSearchData }))
-  }
+    const { value } = e.target;
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.indication = value;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
   getTargetData2 = (e) => {
-    const { value } = e.target
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.target_data = value
-    this.setState(() => ({ TargetSearchData: TargetSearchData }))
-  }
+    const { value } = e.target;
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.target_data = value;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
   get_drug_name = (e) => {
-    const { value } = e.target
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.drug_name = value
-    this.setState(() => ({ TargetSearchData: TargetSearchData }))
-  }
+    const { value } = e.target;
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.drug_name = value;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
   getTargetList = () => {
-    let data = this.state.TargetSearchData
+    let data = this.state.TargetSearchData;
 
     if (data.target_class == '' && data.target_data == '') {
-      return message.warning('请输入查询条件！')
+      return message.warning('请输入查询条件！');
     }
-    this.setState(() => ({ loading: true }))
+    this.setState(() => ({ loading: true }));
     request
       .post('/gpcr/targets_search', data)
       .then((res) => {
-        console.log(res)
-        this.setState(() => ({ loading: false }))
+        console.log(res);
+        this.setState(() => ({ loading: false }));
         if (res.data.code === 200) {
           this.props.history.push({
             pathname: '/home/SearchList',
             search: qs.stringify(data),
-          })
+          });
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
       })
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
 
   onChangeCheckbox = (e) => {
-    console.log(e)
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.select_status = e
-    this.setState(() => ({ TargetSearchData: TargetSearchData }))
-    console.log(this.state.TargetSearchData)
-  }
+    console.log(e);
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.select_status = e;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+    console.log(this.state.TargetSearchData);
+  };
   handleChange = (e) => {
-    console.log(e)
-    this.setState(() => ({ select_db: e }))
+    console.log(e);
+    this.setState(() => ({ select_db: e }));
     if (e != 'Ligands') {
-      this.setState(() => ({ data: '' }))
+      this.setState(() => ({ data: '' }));
     }
-  }
+  };
   childClassChange = (e) => {
-    console.log(e)
-    let searchData = this.state.searchData
-    searchData.target_families = e
-    this.setState(() => ({ searchData: searchData }))
-  }
+    console.log(e);
+    let searchData = this.state.searchData;
+    searchData.target_families = e;
+    this.setState(() => ({ searchData: searchData }));
+  };
   getClassData = (e) => {
-    console.log(e)
-    this.setState(() => ({ classData: e }))
-    let searchData = this.state.searchData
-    searchData.target_class = e
-    this.setState(() => ({ searchData: searchData }))
-    console.log(this.state.searchData)
-    let value = this.state.allClassList
-    let childData = value[e]
-    console.log(childData)
-    this.setState(() => ({ childClassList: childData }))
-  }
+    console.log(e);
+    this.setState(() => ({ classData: e }));
+    let searchData = this.state.searchData;
+    searchData.target_class = e;
+    this.setState(() => ({ searchData: searchData }));
+    console.log(this.state.searchData);
+    let value = this.state.allClassList;
+    let childData = value[e];
+    console.log(childData);
+    this.setState(() => ({ childClassList: childData }));
+  };
   targetChange = (e) => {
-    let searchData = this.state.searchData
-    searchData.target_type = e
-    this.setState(() => ({ searchData: searchData }))
-  }
+    let searchData = this.state.searchData;
+    searchData.target_type = e;
+    this.setState(() => ({ searchData: searchData }));
+  };
   logSmiles = (e) => {
-    let searchData = this.state.searchData
-    searchData.drugs_data = e
-    this.setState(() => ({ searchData: searchData }))
+    let searchData = this.state.searchData;
+    searchData.drugs_data = e;
+    this.setState(() => ({ searchData: searchData }));
     // this.setState(()=>({data:e }))
-  }
-  componentDidMount () {
+  };
+  componentDidMount() {
     // this.getList()
     // this.getSelectList()
-    this.getTargetSelectList()
+    this.getTargetSelectList();
   }
   getSelectList = () => {
     request
       .get('/gpcr/target_class/drug')
       .then((res) => {
-        console.log(res)
+        console.log(res);
         if (res.data.code === 200) {
-          console.log(res.data.data)
+          console.log(res.data.data);
 
           this.setState({
             classList: Object.keys(res.data.data),
             allClassList: res.data.data,
-          })
-          console.log(this.state)
+          });
+          console.log(this.state);
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
       })
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   getTargetSelectList = () => {
-    request
-      .get('/gpcr/target_class/target')
-      .then((res) => {
-        console.log(res)
-        if (res.data.code === 200) {
-          console.log(res.data.data)
-          this.setState({
-            TargetClassList: res.data.data,
-            // TargetAllClassList: res.data.data,
-          })
-          console.log(this.state)
-        } else {
-          message.error(res.data.msg)
-        }
-      })
-      .catch((err) => {
-        console.error(err)
-      })
-  }
+    localStorage.getItem('token') &&
+      request
+        .get('/gpcr/target_class/target')
+        .then((res) => {
+          console.log(res);
+          if (res.data.code === 200) {
+            console.log(res.data.data);
+            this.setState({
+              TargetClassList: res.data.data,
+              // TargetAllClassList: res.data.data,
+            });
+            console.log(this.state);
+          } else {
+            message.error(res.data.msg);
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+  };
   getValue = (e) => {
-    const { value } = e.target
-    let searchData = this.state.searchData
-    searchData.drugs_data = value
-    this.setState(() => ({ searchData: searchData }))
-  }
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.drugs_data = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
   getindication = (e) => {
-    const { value } = e.target
-    let searchData = this.state.searchData
-    searchData.indication = value
-    this.setState(() => ({ searchData: searchData }))
-  }
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.indication = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
   getTargetData = (e) => {
-    const { value } = e.target
-    let searchData = this.state.searchData
-    searchData.target_data = value
-    this.setState(() => ({ searchData: searchData }))
-  }
+    const { value } = e.target;
+    let searchData = this.state.searchData;
+    searchData.target_data = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
 
   onChangeRadio = (e) => {
-    let value = e.target.value
-    let searchData = this.state.searchData
-    searchData.pdb_status = value
+    let value = e.target.value;
+    let searchData = this.state.searchData;
+    searchData.pdb_status = value;
     this.setState({
       searchData: searchData,
-    })
-  }
+    });
+  };
   onChangeRadio2 = (e) => {
-    let value = e.target.value
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.pdb_status = value
+    let value = e.target.value;
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.pdb_status = value;
     this.setState({
       TargetSearchData: TargetSearchData,
-    })
-  }
+    });
+  };
   onChangeRadio3 = (e) => {
-    let value = e.target.value
-    let searchData = this.state.searchData
-    searchData.finger = value
+    let value = e.target.value;
+    let searchData = this.state.searchData;
+    searchData.finger = value;
     this.setState({
       searchData: searchData,
-    })
-  }
+    });
+  };
   onChangeRadio4 = (e) => {
-    let value = e.target.value
-    let ligandSearchData = this.state.ligandSearchData
-    ligandSearchData.finger = value
+    let value = e.target.value;
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.finger = value;
     this.setState({
       ligandSearchData: ligandSearchData,
-    })
-  }
+    });
+  };
   getList = () => {
-    let data = this.state.searchData
+    let data = this.state.searchData;
     request
       .post('/gpcr/ligand_search', qs.stringify(data))
       .then((res) => {
-        console.log(res)
+        console.log(res);
         if (res.data.code === 200) {
           this.props.history.push({
             pathname: '/home/SearchList',
             search: qs.stringify(data),
-          })
+          });
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
       })
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   getDrugsList = () => {
-    let data = this.state.searchData
+    let data = this.state.searchData;
     if (data.drugs_data == '') {
-      return message.warning('请输入查询条件！')
+      return message.warning('请输入查询条件！');
     }
-    this.setState(() => ({ loading: true }))
+    this.setState(() => ({ loading: true }));
     request
       .post('/gpcr/drugs_search', data)
       .then((res) => {
-        console.log(res)
-        this.setState(() => ({ loading: false }))
+        console.log(res);
+        this.setState(() => ({ loading: false }));
         if (res.data.code === 200) {
           this.props.history.push({
             pathname: '/home/SearchList',
             search: qs.stringify(data),
-          })
+          });
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
       })
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   getDraw = () => {
-    this.setState(() => ({ draw: !this.state.draw }))
-  }
+    this.setState(() => ({ draw: !this.state.draw }));
+  };
   compoundChange = (e) => {
-    console.log(e)
-    let searchData = this.state.searchData
-    searchData.drugs_type = e
-    this.setState(() => ({ searchData: searchData }))
-    console.log(this.state.searchData)
-  }
+    console.log(e);
+    let searchData = this.state.searchData;
+    searchData.drugs_type = e;
+    this.setState(() => ({ searchData: searchData }));
+    console.log(this.state.searchData);
+  };
   callback = (e) => {
-    console.log(e)
-    let searchData = this.state.searchData
-    searchData.name = e
-    this.setState(() => ({ searchData: searchData }))
-    console.log(this.state.searchData)
-  }
+    console.log(e);
+    let searchData = this.state.searchData;
+    searchData.name = e;
+    this.setState(() => ({ searchData: searchData }));
+    console.log(this.state.searchData);
+  };
   getJsme = () => {
-    console.log(1)
-  }
+    console.log(1);
+  };
 
-  render () {
-    const {
-      select_db,
-      data,
-      data_type,
-      optionsList,
-      draw,
-      SelectList,
-      targetList,
-      classList,
-      classData,
-      childClassList,
-      compoundList,
-      TargetClassList,
-      TargetChildClassList,
-    } = this.state
+  render() {
+    const { select_db, data, data_type, optionsList, draw, SelectList, targetList, classList, classData, childClassList, compoundList, TargetClassList, TargetChildClassList } = this.state;
     const formItemLayout = {
       labelCol: { span: 8 },
       wrapperCol: { span: 12 },
-    }
+    };
     const formTailLayout = {
       labelCol: { span: 8 },
       wrapperCol: { span: 12, offset: 8 },
-    }
+    };
     const formTailLayout2 = {
       labelCol: { span: 8 },
       wrapperCol: { span: 13, offset: 8 },
-    }
+    };
     return (
-      <div className="home">
-        <div className="home-div">
+      <div className='home'>
+        <div className='home-div'>
           {/* <LogoTitlte></LogoTitlte> */}
-          <Tabs onChange={this.callback} type="card">
-            <TabPane tab="Drug" key="Drug">
-              <div className="top-div">
+          <Tabs onChange={this.callback} type='card'>
+            <TabPane tab='Drug' key='Drug'>
+              <div className='top-div'>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="请输入药物名或Smiles" {...formItemLayout}>
-                      <Input
-                        placeholder="请输入化合物"
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getValue}
-                        value={this.state.searchData.drugs_data}
-                      />
+                  <Form layout='horizontal'>
+                    <Form.Item label='请输入药物名或Smiles' {...formItemLayout}>
+                      <Input placeholder='请输入化合物' style={{ width: 250 }} size='large' onChange={this.getValue} value={this.state.searchData.drugs_data} />
                     </Form.Item>
-                    <Form.Item label="" {...formTailLayout}>
-                      <Button
-                        type="primary"
-                        style={{ marginRight: '50px' }}
-                        onClick={this.getDraw}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
                         画结构
                       </Button>
-                      <div
-                        className={
-                          draw ? 'bottom-div' : 'bottom-div isShowDiv'
-                        }>
-                        <Radio.Group
-                          onChange={this.onChangeRadio3}
-                          value={this.state.searchData.finger}>
+                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
+                        <Radio.Group onChange={this.onChangeRadio3} value={this.state.searchData.finger}>
                           <Radio value={0}>Substructure</Radio>
                           {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                           <Radio value={1}>Similar Structure</Radio>
                         </Radio.Group>
                       </div>
 
-                      <div
-                        className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
-                        onClick={this.getJsme}>
-                        <Jsme
-                          height="500px"
-                          width="700px"
-                          options="oldlook,star"
-                          onChange={this.logSmiles}
-                        />
+                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
+                        <Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles} />
                       </div>
                     </Form.Item>
-                    <Form.Item label="使用PDB查询" {...formItemLayout}>
-                      <Radio.Group
-                        onChange={this.onChangeRadio}
-                        value={this.state.searchData.pdb_status}>
+                    <Form.Item label='使用PDB查询' {...formItemLayout}>
+                      <Radio.Group onChange={this.onChangeRadio} value={this.state.searchData.pdb_status}>
                         <Radio value={0}>不使用</Radio>
                         {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                         <Radio value={2}>有PDB结构</Radio>
                       </Radio.Group>
                     </Form.Item>
-                    <Form.Item label="" {...formTailLayout}>
-                      <Button
-                        type="primary"
-                        style={{ width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getDrugsList}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}>
                         Search
                       </Button>
                     </Form.Item>
-                    <Form.Item label="Tips" {...formTailLayout2}>
-                      <div className="Tips-div">
-                        <div>
-                          1.
-                          本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。
-                        </div>
-                        <div>
-                          2.
-                          您可以直接检索药物名称，精准搜索您所需要的药物。您也可以试着画出您希望查询的分子片段，以检索包含这些片段的药物分子。
-                        </div>
-                        <div>
-                          3.
-                          如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有PDB结构”选项，检索符合要求的药物分子。
-                        </div>
+                    <Form.Item label='Tips' {...formTailLayout2}>
+                      <div className='Tips-div'>
+                        <div>1. 本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。</div>
+                        <div>2. 您可以直接检索药物名称，精准搜索您所需要的药物。您也可以试着画出您希望查询的分子片段，以检索包含这些片段的药物分子。</div>
+                        <div>3. 如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有PDB结构”选项，检索符合要求的药物分子。</div>
                         {/* <div>
                           4.
                           使用药物的适应症作为检索关键词，可以检索出与病症相关的药物分子。
@@ -671,68 +590,42 @@ class Home extends React.Component {
                 </div>
               </div>
             </TabPane>
-            <TabPane tab="Target" key="Target">
-              <div className="top-div">
+            <TabPane tab='Target' key='Target'>
+              <div className='top-div'>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="请选择Class" {...formItemLayout}>
-                      <Select
-                        value={this.state.TargetSearchData.target_class}
-                        style={{ width: 250 }}
-                        size="large"
-                        placeholder="请选择"
-                        onChange={this.getTargetClassData}>
+                  <Form layout='horizontal'>
+                    <Form.Item label='请选择Class' {...formItemLayout}>
+                      <Select value={this.state.TargetSearchData.target_class} style={{ width: 250 }} size='large' placeholder='请选择' onChange={this.getTargetClassData}>
                         {TargetClassList.map((item, index) => {
                           return (
                             <Option key={index} value={item.class}>
                               {item.class}
                             </Option>
-                          )
+                          );
                         })}
                       </Select>
                     </Form.Item>
-                    <Form.Item
-                      label="请输入Target name或Uniprot id"
-                      {...formItemLayout}>
-                      <Input
-                        placeholder="请输入"
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getTargetData2}
-                        value={this.state.TargetSearchData.target_data}
-                      />
+                    <Form.Item label='请输入Target name或Uniprot id' {...formItemLayout}>
+                      <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getTargetData2} value={this.state.TargetSearchData.target_data} />
                     </Form.Item>
-                    <Form.Item label="使用PDB查询" {...formItemLayout}>
-                      <Radio.Group
-                        onChange={this.onChangeRadio2}
-                        value={this.state.TargetSearchData.pdb_status}>
+                    <Form.Item label='使用PDB查询' {...formItemLayout}>
+                      <Radio.Group onChange={this.onChangeRadio2} value={this.state.TargetSearchData.pdb_status}>
                         <Radio value={0}>不使用</Radio>
                         {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                         <Radio value={2}>有PDB结构</Radio>
                       </Radio.Group>
                     </Form.Item>
 
-                    <Form.Item label="" {...formTailLayout}>
-                      <Button
-                        type="primary"
-                        style={{ width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getTargetList}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getTargetList}>
                         Search
                       </Button>
                     </Form.Item>
-                    <Form.Item label="Tips" {...formTailLayout2}>
-                      <div className="Tips-div">
+                    <Form.Item label='Tips' {...formTailLayout2}>
+                      <div className='Tips-div'>
                         <div>1. 本页面提供GPCR相关靶点数据检索功能。</div>
-                        <div>
-                          2.
-                          您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。
-                        </div>
-                        <div>
-                          3.
-                          如果您对靶点的结晶结构感兴趣，也可以勾选“是否有PDB结构”选项，检索有结晶结构的靶点。
-                        </div>
+                        <div>2. 您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
+                        <div>3. 如果您对靶点的结晶结构感兴趣，也可以勾选“是否有PDB结构”选项，检索有结晶结构的靶点。</div>
                         {/* <div>
                           4.
                           如果您对靶点的结晶结构感兴趣，也可以勾选“是否有PDB结构”选项，检索有结晶结构的靶点。
@@ -747,53 +640,33 @@ class Home extends React.Component {
                 </div>
               </div>
             </TabPane>
-            <TabPane tab="Mutation" key="Mutation">
-              <div className="top-div">
+            <TabPane tab='Mutation' key='Mutation'>
+              <div className='top-div'>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="请选择Class" {...formItemLayout}>
-                      <Select
-                        value={this.state.MutationSearchData.target_class}
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getClassData3}>
+                  <Form layout='horizontal'>
+                    <Form.Item label='请选择Class' {...formItemLayout}>
+                      <Select value={this.state.MutationSearchData.target_class} style={{ width: 250 }} size='large' onChange={this.getClassData3}>
                         {TargetClassList.map((item, index) => {
                           return (
                             <Option key={index} value={item.class}>
                               {item.class}
                             </Option>
-                          )
+                          );
                         })}
                       </Select>
                     </Form.Item>
-                    <Form.Item
-                      label="请输入Target name或者Uniprot id"
-                      {...formItemLayout}>
-                      <Input
-                        placeholder="请输入"
-                        style={{ width: 250 }}
-                        size="large"
-                        value={this.state.MutationSearchData.target_data}
-                        onChange={this.getMutationValue}
-                      />
+                    <Form.Item label='请输入Target name或者Uniprot id' {...formItemLayout}>
+                      <Input placeholder='请输入' style={{ width: 250 }} size='large' value={this.state.MutationSearchData.target_data} onChange={this.getMutationValue} />
                     </Form.Item>
-                    <Form.Item label="" {...formTailLayout}>
-                      <Button
-                        type="primary"
-                        style={{ width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getMutationList}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getMutationList}>
                         Search
                       </Button>
                     </Form.Item>
-                    <Form.Item label="Tips" {...formTailLayout2}>
-                      <div className="Tips-div">
+                    <Form.Item label='Tips' {...formTailLayout2}>
+                      <div className='Tips-div'>
                         <div>1. 本页面提供GPCR mutation相关数据的搜索功能</div>
-                        <div>
-                          2.
-                          您可以直接搜索指定target或者一类target的mutation数据
-                        </div>
+                        <div>2. 您可以直接搜索指定target或者一类target的mutation数据</div>
                         {/* <div> 3. 您可以指定mutation的位点来进行检索。</div>
                         <div>
                           4.
@@ -806,24 +679,13 @@ class Home extends React.Component {
                 </div>
               </div>
             </TabPane>
-            <TabPane tab="Indication" key="Indication">
-              <div className="top-div">
+            <TabPane tab='Indication' key='Indication'>
+              <div className='top-div'>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="输入适应症进行检索" {...formItemLayout}>
-                      <Input
-                        placeholder="请输入适应症"
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getIndicationValue}
-                        value={this.state.IndicationSearchData.indication}
-                      />
-                      <Button
-                        type="primary"
-                        style={{ marginLeft: 50, width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getIndicationList}>
+                  <Form layout='horizontal'>
+                    <Form.Item label='输入适应症进行检索' {...formItemLayout}>
+                      <Input placeholder='请输入适应症' style={{ width: 250 }} size='large' onChange={this.getIndicationValue} value={this.state.IndicationSearchData.indication} />
+                      <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getIndicationList}>
                         Search
                       </Button>
                     </Form.Item>
@@ -831,55 +693,29 @@ class Home extends React.Component {
                 </div>
               </div>
             </TabPane>
-            <TabPane tab="Ligand" key="Ligand">
-              <div className="top-div">
+            <TabPane tab='Ligand' key='Ligand'>
+              <div className='top-div'>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="输入Chemblid或Smiles" {...formItemLayout}>
-                      <Input
-                        placeholder="请输入"
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getLigendValue}
-                        value={this.state.ligandSearchData.ligand_data}
-                      />
+                  <Form layout='horizontal'>
+                    <Form.Item label='输入Chemblid或Smiles' {...formItemLayout}>
+                      <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getLigendValue} value={this.state.ligandSearchData.ligand_data} />
                     </Form.Item>
-                    <Form.Item label="" {...formTailLayout}>
-                      <Button
-                        type="primary"
-                        style={{ marginRight: '50px' }}
-                        onClick={this.getDraw}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
                         画结构
                       </Button>
-                      <Button
-                        type="primary"
-                        style={{ marginLeft: 50, width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getLigendList}>
+                      <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getLigendList}>
                         Search
                       </Button>
-                      <div
-                        className={
-                          draw ? 'bottom-div' : 'bottom-div isShowDiv'
-                        }>
-                        <Radio.Group
-                          onChange={this.onChangeRadio4}
-                          value={this.state.ligandSearchData.finger}>
+                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
+                        <Radio.Group onChange={this.onChangeRadio4} value={this.state.ligandSearchData.finger}>
                           <Radio value={0}>Substructure</Radio>
                           {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                           <Radio value={1}>Similar Structure</Radio>
                         </Radio.Group>
                       </div>
-                      <div
-                        className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
-                        onClick={this.getJsme}>
-                        <Jsme
-                          height="500px"
-                          width="700px"
-                          options="oldlook,star"
-                          onChange={this.logSmiles2}
-                        />
+                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
+                        <Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles2} />
                       </div>
                     </Form.Item>
                   </Form>
@@ -889,8 +725,8 @@ class Home extends React.Component {
           </Tabs>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default Home
+export default Home;

src/routes/Kinase/LigandDetails/index.js

 import React, { Component } from 'react'
 import { Card, Tooltip, Pagination, message, Popover, Button, Tabs, Spin, Table, Tag, Input, Collapse, Modal, Form, Select, InputNumber, Typography } from 'antd'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from "molstar-react"
 import { Jsme } from 'jsme-react'
 import qs from 'qs'

src/routes/Kinase/SearchDetails/index.js

 import React, { Component } from 'react'
 import { Card,Tooltip,Pagination,message,Popover,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from "molstar-react";
 import { Jsme } from 'jsme-react'
 import qs from 'qs'

src/routes/Kinase/SearchList/index.js

 import React, { Component } from 'react'
 import { Jsme } from 'jsme-react'
 import { Card,Button,Pagination,Tabs,Spin,message ,Collapse } from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import qs from 'qs'
 import './index.css'
 const { TabPane } = Tabs;

src/routes/Kinase/TargetDetails/index.js

 import React, { Component } from 'react'
 import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography,Pagination} from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from "molstar-react";
 import { Jsme } from 'jsme-react'
 import qs from 'qs'

src/routes/Kinase/index.js

@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
 import LogoTitlte from '../../components/LogoTitlte/index'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
-import { request } from '../../utils/request'
+import request from '../../utils/request'
 import './style.css'
 const { TabPane } = Tabs;
 const { Option } = Select;

src/routes/Login/LoginForm.js

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
 import { inject, observer } from 'mobx-react/index'
 import { Form, Input, message } from 'antd'
 import PromptBox from '../../components/PromptBox'
-import { request } from '../../utils/request'
+import request from '../../utils/request'
 import qs from 'qs'
 import md5 from 'js-md5'
 

src/routes/drugbank/IndicationDetails/index.js

@@ -9,7 +9,7 @@ import {
   Tag,
   Typography,
 } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import "./index.css";
 import qs from "qs";
 const { Title } = Typography;

src/routes/drugbank/LigandDetails/index.js

@@ -18,7 +18,7 @@ import {
   InputNumber,
   Typography,
 } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import Molstar from "molstar-react";
 import { Jsme } from "jsme-react";
 import qs from "qs";

src/routes/drugbank/SearchDetails/index.js

@@ -18,7 +18,7 @@ import {
   InputNumber,
   Typography,
 } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import Molstar from "molstar-react";
 import { Jsme } from "jsme-react";
 import qs from "qs";

src/routes/drugbank/SearchList/index.js

 import React, { Component } from 'react'
 import { Jsme } from 'jsme-react'
 import { Card, Button, Pagination, Tabs, Spin, message, Collapse } from 'antd'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import qs from 'qs'
 import './index.css'
 const { TabPane } = Tabs

src/routes/drugbank/TargetDetails/index.js

@@ -19,7 +19,7 @@ import {
   Typography,
   Pagination,
 } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import Molstar from "molstar-react";
 import { Jsme } from "jsme-react";
 import qs from "qs";

src/routes/drugbank/index.js

@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
 import LogoTitlte from '../../components/LogoTitlte/index'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
-import { request } from '../../utils/request'
+import request from '../../utils/request'
 import './style.css'
 const { TabPane } = Tabs;
 const { Option } = Select;

src/utils/request.js

-import axios from 'axios'
-import { u1, u2 } from './url'
-axios.defaults.timeout = 10000
-var baseURL = u2()
+import axios from 'axios';
+import { getQueryString } from './utils';
 
-export const request = axios.create({
-  baseURL: baseURL,
-})
+const baseURL = 'http://52.83.169.190:8005 /';
 
+const token = getQueryString('token') || localStorage.getItem('token');
 
+const request = axios.create({
+  baseURL,
+  timeout: 10000,
+  headers: {
+    accessToken: token,
+  },
+});
+
+function checkToken(config) {
+  request
+    .get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
+    .then((res) => {
+      console.log(res);
+      if (res.data.code === 200) {
+        console.log('token 检验通过');
+        return config;
+      } else {
+        console.log('token校验没通过  返回登录页');
+        localStorage.removeItem('token');
+        // window.open('http://localhost:3000/#/login', '_self');
+        window.open('http://69.235.144.91:3048/#/login', '_self');
+      }
+    })
+    .catch((err) => {
+      localStorage.removeItem('token');
+      window.open('http://69.235.144.91:3048/#/login', '_self');
+      console.log('err', err);
+    });
+}
+checkToken();
+
+//拦截器
+request.interceptors.request.use((config) => {
+  console.log('token---', '拦截器方法校验token');
+  console.log(config);
+  // alert('拦截器..');
+  if (!!token) {
+    checkToken(config);
+  } else {
+    console.log('token为空....');
+    // alert('token为空..');
+    localStorage.removeItem('token');
+    window.open('http://69.235.144.91:3048/#/login', '_self');
+  }
+  // return config;
+});
+
+request.interceptors.response.use(
+  (res) => {
+    return res.data;
+  },
+  (err) => {
+    if (err && err.response) {
+      switch (err.response.status) {
+        case 400:
+          console.log('请求错误');
+          break;
+        case 401:
+          console.log('未授权访问');
+          break;
+        case 404:
+          console.log('页面未找到');
+          break;
+        default:
+          console.log('其他错误信息');
+      }
+    }
+    return err;
+  }
+);
+
+export default request;

src/utils/url.js

 
-export function u1 () {
-  return 'http://52.83.169.190:8005 /'
-}
 function _getCookie (name) {
   let start, end
   if (document.cookie.length > 0) {
@@ -90,9 +87,7 @@ function _setCookie (name, value, expire) {
   document.cookie = name + '=' + escape(value) + '; path=/' +
     (expire ? ';expires=' + date.toGMTString() : '')
 }
-export function u2 () {
-  return 'http://52.83.169.190:8005/'
-}
+
 function accMul (arg1, arg2) {
   let m = 0
   const s1 = arg1.toString()

src/utils/utils.js

@@ -63,4 +63,17 @@ export function preloadingImages(arr) {
     const img = new Image()
     img.src = item
   })
+}
+
+/**
+ * 获取URL中指定的参数
+ */
+export function getQueryString(name) {
+  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
+  let r = window.location.hash.split('?')[1] && window.location.hash.split('?')[1].match(reg); //获取url中"?"符后的字符串并正则匹配
+  let context = '';
+  if (r != null) context = decodeURIComponent(r[2]);
+  reg = null;
+  r = null;
+  return context == null || context == '' || context == 'undefined' ? '' : context;
 }
\ No newline at end of file