Skip to content

A
antigen2
Commit 9a025e72 by wangshufen
Options

feature:登录功能添加token校验

parent c0eb9228
Showing with 304 additions and 226 deletions
.eslintrc.js 0 → 100644
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 0 → 100644
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
src/routes/Home/index.js
import React from 'react' import React from 'react';
import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from 'antd'; import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col } from 'antd';
import LogoTitlte from '../../components/LogoTitlte/index' import LogoTitlte from '../../components/LogoTitlte/index';
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react';
import qs from 'qs' import qs from 'qs';
import request from '../../utils/request' import request from '../../utils/request';
import './style.css' import './style.css';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Option } = Select; const { Option } = Select;
class Home extends React.Component { class Home extends React.Component {
state = { state = {
select_db:'Ligands', select_db: 'Ligands',
data:'', data: '',
page: 1, page: 1,
page_size: 10, page_size: 10,
data_type:'smile', data_type: 'smile',
target_class:'', target_class: '',
// target_families:'', // target_families:'',
searchData:{ searchData: {
antibodyName:'', antibodyName: '',
species:'', species: '',
antibodyType:'', antibodyType: '',
antigenName:'', antigenName: '',
clinicalIndication:'', clinicalIndication: '',
companies:'', companies: '',
status:'', status: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
disabled:true, disabled: true,
loading:false, loading: false,
SelectList:[], SelectList: [],
AntibodyTypeList:[], AntibodyTypeList: [],
StatusList:[], StatusList: [],
draw:false, draw: false,
classList:[], classList: [],
classData:'All Class', classData: 'All Class',
allClassList:{}, allClassList: {},
childClassList :[], childClassList: [],
}; };
componentDidMount(){ componentDidMount() {
// this.getList() // this.getList()
// this.getSelectList() // this.getSelectList()
this.getClassList() this.getClassList();
} }
getantibodyName=(e)=>{ getantibodyName = (e) => {
const { value } = e.target; const { value } = e.target;
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.antibodyName=value searchData.antibodyName = value;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getAntigenName = (e) => {
getAntigenName=(e)=>{
const { value } = e.target; const { value } = e.target;
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.antigenName=value searchData.antigenName = value;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getClinicalIndication = (e) => {
getClinicalIndication=(e)=>{
const { value } = e.target; const { value } = e.target;
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.clinicalIndication=value searchData.clinicalIndication = value;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getCompanies = (e) => {
getCompanies=(e)=>{
const { value } = e.target; const { value } = e.target;
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.companies=value searchData.companies = value;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getSpecies = (e) => {
getSpecies=(e)=>{
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.species=e searchData.species = e;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getAntibodyType = (e) => {
getAntibodyType=(e)=>{
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.antibodyType=e searchData.antibodyType = e;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getStatus = (e) => {
getStatus=(e)=>{
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.status=e searchData.status = e;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getValue = (e) => {
getValue=(e)=>{
const { value } = e.target; const { value } = e.target;
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.antibodyName=value searchData.antibodyName = value;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getClassList() {
getClassList(){
console.log(qs.parse(this.props.location.search.slice(1))); console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({loading:true})
request.get('/common/codes') localStorage.getItem('token') &&
.then(res => { request
console.log(res) .get('/common/codes')
if (res.data.code===0) { .then((res) => {
console.log(res.data.data); this.setState({ loading: true });
this.setState({SelectList:res.data.data.species}) console.log(res);
this.setState({AntibodyTypeList:res.data.data.antibodyType}) if (res.data.code === 0) {
this.setState({StatusList:res.data.data.status}) console.log(res.data.data);
this.setState({loading:false}) this.setState({ SelectList: res.data.data.species });
this.setState({ AntibodyTypeList: res.data.data.antibodyType });
}else{ this.setState({ StatusList: res.data.data.status });
message.error(res.data.msg); this.setState({ loading: false });
} } else {
}) message.error(res.data.msg);
.catch(err => { }
console.error(err); })
}) .catch((err) => {
console.error(err);
});
} }
getindication=(e)=>{ getindication = (e) => {
const { value } = e.target; const { value } = e.target;
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.indication=value searchData.indication = value;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
} getTargetData = (e) => {
getTargetData=(e)=>{
const { value } = e.target; const { value } = e.target;
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.target_data=value searchData.target_data = value;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
};
}
onChangeRadio = (e) => {
onChangeRadio=(e)=>{
console.log(e.target.value); console.log(e.target.value);
let value=e.target.value let value = e.target.value;
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.pdb_status=value searchData.pdb_status = value;
this.setState({ this.setState({
searchData: searchData, searchData: searchData,
}); });
} };
SearchIndication=()=>{ SearchIndication = () => {
let data={ let data = {
clinicalIndication:this.state.searchData.clinicalIndication clinicalIndication: this.state.searchData.clinicalIndication,
} };
this.props.history.push({ pathname: '/home/AutoimmuneDiseases', search: qs.stringify(data)}) this.props.history.push({ pathname: '/home/AutoimmuneDiseases', search: qs.stringify(data) });
} };
getList=()=>{ getList = () => {
let data=this.state.searchData let data = this.state.searchData;
this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data)}) this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
};
} getDraw = () => {
getDraw=()=>{ this.setState(() => ({ draw: !this.state.draw }));
this.setState(()=>({draw:!this.state.draw })) };
} compoundChange = (e) => {
compoundChange=(e)=>{
console.log(e); console.log(e);
let searchData = this.state.searchData; let searchData = this.state.searchData;
searchData.drugs_type=e searchData.drugs_type = e;
this.setState(()=>({searchData:searchData })) this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData) console.log(this.state.searchData);
};
} callback = (e) => {
callback=(e)=>{ console.log(e);
console.log(e); let searchData = this.state.searchData;
let searchData = this.state.searchData; searchData.name = e;
searchData.name=e this.setState(() => ({ searchData: searchData }));
this.setState(()=>({searchData:searchData })) console.log(this.state.searchData);
console.log(this.state.searchData); };
} getJsme = () => {
getJsme=()=>{
console.log(1); console.log(1);
} };
render() { render() {
const {AntibodyTypeList,StatusList,SelectList,targetList,classList,classData,childClassList,compoundList,searchData}=this.state const { AntibodyTypeList, StatusList, SelectList, targetList, classList, classData, childClassList, compoundList, searchData } = this.state;
const formItemLayout ={ const formItemLayout = {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12 }, wrapperCol: { span: 12 },
} };
const formTailLayout = { const formTailLayout = {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12, offset: 8 }, wrapperCol: { span: 12, offset: 8 },
...@@ -195,69 +183,62 @@ class Home extends React.Component { ...@@ -195,69 +183,62 @@ class Home extends React.Component {
<div className='home'> <div className='home'>
<div className='home-div'> <div className='home-div'>
{/* <LogoTitlte></LogoTitlte> */} {/* <LogoTitlte></LogoTitlte> */}
<div className='top-div'> <div className='top-div'>
<div> <div>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label="Antibody name" {...formItemLayout} > <Form.Item label='Antibody name' {...formItemLayout}>
<Input placeholder="请输入" style={{ width: 250 }} size="large" onChange={this.getantibodyName} value={this.state.searchData.antibodyName} /> <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getantibodyName} value={this.state.searchData.antibodyName} />
</Form.Item>
<Form.Item label="Species" {...formItemLayout}>
<Select value={this.state.searchData.species} style={{ width: 250 }} size="large" onChange={this.getSpecies}>
{
SelectList.map(
(item,index)=>{
return(
<Option key={index} value={item}>{item}</Option>
)
}
)
}
</Select>
</Form.Item> </Form.Item>
<Form.Item label="Antibody type" {...formItemLayout} > <Form.Item label='Species' {...formItemLayout}>
<Select value={this.state.searchData.antibodyType} style={{ width: 250 }} size="large" onChange={this.getAntibodyType}> <Select value={this.state.searchData.species} style={{ width: 250 }} size='large' onChange={this.getSpecies}>
{ {SelectList.map((item, index) => {
AntibodyTypeList.map( return (
(item,index)=>{ <Option key={index} value={item}>
return( {item}
<Option key={index} value={item}>{item}</Option> </Option>
) );
})}
} </Select>
)
}
</Select>
</Form.Item> </Form.Item>
<Form.Item label="Antigen name" {...formItemLayout} > <Form.Item label='Antibody type' {...formItemLayout}>
<Input placeholder="请输入" style={{ width: 250 }} size="large" onChange={this.getAntigenName} value={this.state.searchData.antigenName} /> <Select value={this.state.searchData.antibodyType} style={{ width: 250 }} size='large' onChange={this.getAntibodyType}>
{AntibodyTypeList.map((item, index) => {
return (
<Option key={index} value={item}>
{item}
</Option>
);
})}
</Select>
</Form.Item> </Form.Item>
<Form.Item label="Clinical indication" {...formItemLayout} > <Form.Item label='Antigen name' {...formItemLayout}>
<Input placeholder="请输入" style={{ width: 250 }} size="large" onChange={this.getClinicalIndication} value={this.state.searchData.clinicalIndication} /> <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getAntigenName} value={this.state.searchData.antigenName} />
<Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large' loading={this.state.loading} onClick={this.SearchIndication}>SearchIndication</Button>
</Form.Item> </Form.Item>
<Form.Item label="Company" {...formItemLayout} > <Form.Item label='Clinical indication' {...formItemLayout}>
<Input placeholder="请输入" style={{ width: 250 }} size="large" onChange={this.getCompanies} value={this.state.searchData.companies} /> <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getClinicalIndication} value={this.state.searchData.clinicalIndication} />
<Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.SearchIndication}>
SearchIndication
</Button>
</Form.Item> </Form.Item>
<Form.Item label="Status" {...formItemLayout}> <Form.Item label='Company' {...formItemLayout}>
<Select value={this.state.searchData.status} style={{ width: 250 }} size="large" onChange={this.getStatus}> <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getCompanies} value={this.state.searchData.companies} />
{
StatusList.map(
(item,index)=>{
return(
<Option key={index} value={item}>{item}</Option>
)
}
)
}
</Select>
<Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large' loading={this.state.loading} onClick={this.getList}>Search</Button>
</Form.Item> </Form.Item>
<Form.Item label="" {...formItemLayout}> <Form.Item label='Status' {...formItemLayout}>
<Select value={this.state.searchData.status} style={{ width: 250 }} size='large' onChange={this.getStatus}>
{StatusList.map((item, index) => {
return (
<Option key={index} value={item}>
{item}
</Option>
);
})}
</Select>
<Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getList}>
Search
</Button>
</Form.Item> </Form.Item>
<Form.Item label='' {...formItemLayout} />
{/* <Form.Item label="Tips" {...formTailLayout2}> {/* <Form.Item label="Tips" {...formTailLayout2}>
<div className='Tips-div'> <div className='Tips-div'>
<div>1. 本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。</div> <div>1. 本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。</div>
...@@ -267,17 +248,13 @@ class Home extends React.Component { ...@@ -267,17 +248,13 @@ class Home extends React.Component {
<div>5. 如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有GPCR相关PDB结构”或者“有PDB结构”选项，检索符合要求的药物分子。</div> <div>5. 如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有GPCR相关PDB结构”或者“有PDB结构”选项，检索符合要求的药物分子。</div>
</div> </div>
</Form.Item> */} </Form.Item> */}
</Form> </Form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) );
} }
} }
export default Home export default Home;
\ No newline at end of file
src/utils/request.js
// import axios from 'axios'; import axios from 'axios';
// axios.defaults.timeout = 15000 import { getQueryString } from './utils';
// export const request = axios.create({
// baseURL: 'http://52.83.230.236:9001/yszh/1/api/',
// });
import axios from "axios";
// import { bind } from "file-loader";
axios.defaults.timeout = 15000
var baseURL = 'http://69.235.144.91:9001/yszh/1/api/'
//设置请求得基准地址
axios.defaults.baseURL = baseURL
const request = axios.create();
//设置请求头
axios.defaults.headers['content-type'] ='application/json'; const baseURL = 'http://69.235.144.91:9001/yszh/1/api/';
request.interceptors.request.use(config => { // const baseURL='http://52.83.230.236:9001/yszh/1/api/',
// 给请求头加token的字段,值为token axios.defaults.headers['content-type'] = 'application/json'; //这样写有风险,可能会有请求头是form-data的格式
config.headers.Authorization = window.localStorage.getItem('token') const token = getQueryString('token') || localStorage.getItem('token');
const request = axios.create({
baseURL,
timeout: 15000,
headers: {
accessToken: token,
},
});
function checkToken(config) {
request
.get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
.then((res) => {
console.log('--res', res);
if (res.data.code === 200) {
console.log('token 检验通过');
return config;
} else {
localStorage.removeItem('token');
console.log('token校验没通过 返回登录页');
// window.open('http://localhost:3000/#/login', '_self');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
})
.catch((err) => {
localStorage.removeItem('token');
// alert(' 服务器报错');
console.log('token校验没通过 返回登录页');
window.open('http://69.235.144.91:3048/#/login', '_self');
console.log('err', err);
return false;
});
}
checkToken();
//拦截器
request.interceptors.request.use((config) => {
// config.headers.Authorization = localStorage.getItem('token');
console.log('token---', '拦截器方法校验token');
console.log(config);
if (getQueryString('token') || localStorage.getItem('token')) {
checkToken(config);
} else {
console.log('token为空....');
localStorage.removeItem('token');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
});
request.interceptors.response.use(
(res) => {
return res;
},
(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;
}
);
return config
})
//导出 //导出
export default request; export default request;
src/utils/utils.js
...@@ -63,4 +63,17 @@ export function preloadingImages(arr) { ...@@ -63,4 +63,17 @@ export function preloadingImages(arr) {
const img = new Image() const img = new Image()
img.src = item 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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment