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 { 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'
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',
data:'',
select_db: 'Ligands',
data: '',
page: 1,
page_size: 10,
data_type:'smile',
target_class:'',
data_type: 'smile',
target_class: '',
// target_families:'',
searchData:{
antibodyName:'',
species:'',
antibodyType:'',
antigenName:'',
clinicalIndication:'',
companies:'',
status:'',
pageNum: 1,
pageSize: 10,
searchData: {
antibodyName: '',
species: '',
antibodyType: '',
antigenName: '',
clinicalIndication: '',
companies: '',
status: '',
pageNum: 1,
pageSize: 10,
},
disabled:true,
loading:false,
SelectList:[],
AntibodyTypeList:[],
StatusList:[],
draw:false,
classList:[],
classData:'All Class',
allClassList:{},
childClassList :[],
};
componentDidMount(){
disabled: true,
loading: false,
SelectList: [],
AntibodyTypeList: [],
StatusList: [],
draw: false,
classList: [],
classData: 'All Class',
allClassList: {},
childClassList: [],
};
componentDidMount() {
// this.getList()
// this.getSelectList()
this.getClassList()
this.getClassList();
}
getantibodyName=(e)=>{
getantibodyName = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.antibodyName=value
this.setState(()=>({searchData:searchData }))
}
getAntigenName=(e)=>{
searchData.antibodyName = value;
this.setState(() => ({ searchData: searchData }));
};
getAntigenName = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.antigenName=value
this.setState(()=>({searchData:searchData }))
}
getClinicalIndication=(e)=>{
searchData.antigenName = value;
this.setState(() => ({ searchData: searchData }));
};
getClinicalIndication = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.clinicalIndication=value
this.setState(()=>({searchData:searchData }))
}
getCompanies=(e)=>{
searchData.clinicalIndication = value;
this.setState(() => ({ searchData: searchData }));
};
getCompanies = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.companies=value
this.setState(()=>({searchData:searchData }))
}
getSpecies=(e)=>{
searchData.companies = value;
this.setState(() => ({ searchData: searchData }));
};
getSpecies = (e) => {
let searchData = this.state.searchData;
searchData.species=e
this.setState(()=>({searchData:searchData }))
}
getAntibodyType=(e)=>{
searchData.species = e;
this.setState(() => ({ searchData: searchData }));
};
getAntibodyType = (e) => {
let searchData = this.state.searchData;
searchData.antibodyType=e
this.setState(()=>({searchData:searchData }))
}
getStatus=(e)=>{
searchData.antibodyType = e;
this.setState(() => ({ searchData: searchData }));
};
getStatus = (e) => {
let searchData = this.state.searchData;
searchData.status=e
this.setState(()=>({searchData:searchData }))
}
getValue=(e)=>{
searchData.status = e;
this.setState(() => ({ searchData: searchData }));
};
getValue = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.antibodyName=value
this.setState(()=>({searchData:searchData }))
}
getClassList(){
searchData.antibodyName = value;
this.setState(() => ({ searchData: searchData }));
};
getClassList() {
console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({loading:true})
request.get('/common/codes')
.then(res => {
console.log(res)
if (res.data.code===0) {
console.log(res.data.data);
this.setState({SelectList:res.data.data.species})
this.setState({AntibodyTypeList:res.data.data.antibodyType})
this.setState({StatusList:res.data.data.status})
this.setState({loading:false})
}else{
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
localStorage.getItem('token') &&
request
.get('/common/codes')
.then((res) => {
this.setState({ loading: true });
console.log(res);
if (res.data.code === 0) {
console.log(res.data.data);
this.setState({ SelectList: res.data.data.species });
this.setState({ AntibodyTypeList: res.data.data.antibodyType });
this.setState({ StatusList: res.data.data.status });
this.setState({ loading: false });
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
}
getindication=(e)=>{
getindication = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.indication=value
this.setState(()=>({searchData:searchData }))
}
getTargetData=(e)=>{
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 }))
}
onChangeRadio=(e)=>{
searchData.target_data = value;
this.setState(() => ({ searchData: searchData }));
};
onChangeRadio = (e) => {
console.log(e.target.value);
let value=e.target.value
let value = e.target.value;
let searchData = this.state.searchData;
searchData.pdb_status=value
searchData.pdb_status = value;
this.setState({
searchData: searchData,
});
}
SearchIndication=()=>{
let data={
clinicalIndication:this.state.searchData.clinicalIndication
}
this.props.history.push({ pathname: '/home/AutoimmuneDiseases', search: qs.stringify(data)})
}
getList=()=>{
let data=this.state.searchData
this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data)})
}
getDraw=()=>{
this.setState(()=>({draw:!this.state.draw }))
}
compoundChange=(e)=>{
};
SearchIndication = () => {
let data = {
clinicalIndication: this.state.searchData.clinicalIndication,
};
this.props.history.push({ pathname: '/home/AutoimmuneDiseases', search: qs.stringify(data) });
};
getList = () => {
let data = this.state.searchData;
this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
};
getDraw = () => {
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)
}
callback=(e)=>{
console.log(e);
let searchData = this.state.searchData;
searchData.name=e
this.setState(()=>({searchData:searchData }))
console.log(this.state.searchData);
}
getJsme=()=>{
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);
};
getJsme = () => {
console.log(1);
}
};
render() {
const {AntibodyTypeList,StatusList,SelectList,targetList,classList,classData,childClassList,compoundList,searchData}=this.state
const formItemLayout ={
const { AntibodyTypeList, StatusList, SelectList, targetList, classList, classData, childClassList, compoundList, searchData } = this.state;
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 12 },
}
};
const formTailLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 12, offset: 8 },
......@@ -195,69 +183,62 @@ class Home extends React.Component {
<div className='home'>
<div className='home-div'>
{/* <LogoTitlte></LogoTitlte> */}
<div className='top-div'>
<div>
<Form layout="horizontal">
<Form.Item label="Antibody name" {...formItemLayout} >
<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 layout='horizontal'>
<Form.Item label='Antibody name' {...formItemLayout}>
<Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getantibodyName} value={this.state.searchData.antibodyName} />
</Form.Item>
<Form.Item label="Antibody type" {...formItemLayout} >
<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 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 label="Antigen name" {...formItemLayout} >
<Input placeholder="请输入" style={{ width: 250 }} size="large" onChange={this.getAntigenName} value={this.state.searchData.antigenName} />
<Form.Item label='Antibody type' {...formItemLayout}>
<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 label="Clinical indication" {...formItemLayout} >
<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 label='Antigen name' {...formItemLayout}>
<Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getAntigenName} value={this.state.searchData.antigenName} />
</Form.Item>
<Form.Item label="Company" {...formItemLayout} >
<Input placeholder="请输入" style={{ width: 250 }} size="large" onChange={this.getCompanies} value={this.state.searchData.companies} />
<Form.Item label='Clinical indication' {...formItemLayout}>
<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 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 label='Company' {...formItemLayout}>
<Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getCompanies} value={this.state.searchData.companies} />
</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 label='' {...formItemLayout} />
{/* <Form.Item label="Tips" {...formTailLayout2}>
<div className='Tips-div'>
<div>1. 本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。</div>
......@@ -267,17 +248,13 @@ class Home extends React.Component {
<div>5. 如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有GPCR相关PDB结构”或者“有PDB结构”选项，检索符合要求的药物分子。</div>
</div>
</Form.Item> */}
</Form>
</Form>
</div>
</div>
</div>
</div>
)
);
}
}
export default Home
\ No newline at end of file
export default Home;
src/utils/request.js
// import axios from 'axios';
// axios.defaults.timeout = 15000
// 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();
//设置请求头
import axios from 'axios';
import { getQueryString } from './utils';
axios.defaults.headers['content-type'] ='application/json';
request.interceptors.request.use(config => {
// 给请求头加token的字段,值为token
const baseURL = 'http://69.235.144.91:9001/yszh/1/api/';
// const baseURL='http://52.83.230.236:9001/yszh/1/api/',
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;
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
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