Skip to content

ds147000 / react-project-storage

Go to a project
Commit 95426d82 by GGbong
Options

初始配置完成

1 parent 55039fdd
Inline Side-by-side
Showing with 256 additions and 262 deletions
src/libs/http-request.js
......@@ -104,18 +104,14 @@ class HttpRequest {
case "0":
return data ? data : { data, list }
case 200:
if (res.config.url.indexOf(this.loginUrl) !== -1) {
this.saveLoginInfo(res.data) //保存登陆数据
}
return Array.isArray(data)?data:(typeof data === 'object' ? {message, code, ...data} : {data, message})
// case 400001:
// return Array.isArray(data)?data:(typeof data === 'object' ? {message, code, ...data} : {data, message})
case 401:
if (process.env.NODE_ENV === 'development') console.error(`发生错误，错误代码: ${code};详情：${message}`)
Modal.error({
title: '登陆状态已过期，正在退出登陆'
})
store.dispatch.user.SYSTEM_OUT()
Modal.error('未登录或登录状已失效,请重新登陆')
return Promise.reject('')
// store.commit('SYSTEM_CLEAR') // 清除登陆状态
break
case 403:
......@@ -126,16 +122,6 @@ class HttpRequest {
return Promise.reject(`发生错误!代码: ${code},${message}`, data)
}
}
/**
* 保存登陆数据
* @param {*} jwt token
* @param {*} data 请求数据体
*/
saveLoginInfo(res) {
store.dispatch.user.SYSTEM_LOGIN(res)
    store.dispatch.route.change(res.menu)
}
}
export default HttpRequest
src/router/modules/basisRoute.js
import loadable from '@loadable/component'
const exact = true
export default [ ]
\ No newline at end of file
src/router/router-view.js
......@@ -22,6 +22,7 @@ const getAllRouterName = route => route.map(e => e.url)
const RouterView = ({ basisRoute = [], serviceRoute = [], userRoute = [], userSatatus, SYSTEM_LOGIN }) => {
const [openRoute, setOpenRoute] = useState([])
const history = useHistory()
const [loading, setLoading] = useState(false)
useEffect(() => {
// 二级路由转一级路由
......@@ -40,7 +41,7 @@ const RouterView = ({ basisRoute = [], serviceRoute = [], userRoute = [], userSa
newE.component = serviceRoute[index].component
else
newE.component = () => {
// location.href = APP.othreDomain + newE.url
window.location.href = APP.othreDomain + newE.url
return (<>{newE.url}</>)
}
}
......@@ -53,6 +54,7 @@ const RouterView = ({ basisRoute = [], serviceRoute = [], userRoute = [], userSa
useEffect(() => {
const token = getToken()
const isService = serviceRoute.find(e => e.url === history.location.pathname)
if (userSatatus)
return
......@@ -63,14 +65,17 @@ const RouterView = ({ basisRoute = [], serviceRoute = [], userRoute = [], userSa
.then(res => {
hide()
SYSTEM_LOGIN(res)
if (!isService) history.replace('/')
})
.catch(err => {
hide()
Modal.error({ title: '错误', content: err, onOk: () => history.replace('/login') })
})
} else
}
else if (isService)
history.replace('/login')
}, [])
}, [serviceRoute])
if (userSatatus)
return (
......
src/store/modules/route/connect.js
import { connect } from 'react-redux'
const mapState = state => ({
userRoute: state.route.route,
userSatatus: state.user.userSatatus
......@@ -9,7 +10,8 @@ const mapDispatch = dispatch => ({
add: route => dispatch.route.add(route),
change: route => dispatch.route.change(route),
SYSTEM_LOGIN: res =>{
dispatch.user.SYSTEM_LOGIN(res)
const { codes, loginUserVo } = res
dispatch.user.SYSTEM_LOGIN({ codes, ...loginUserVo })
dispatch.route.change(res.menu)
}
})
......
src/store/modules/user/index.js
......@@ -11,9 +11,8 @@ export default {
reducers: {
// 登录成功
SYSTEM_LOGIN(_, res) {
console.log(res)
const { loginUserVo, codes } = res
return {codes, userSatatus: true, ...loginUserVo}
const { business, company, platformAccount, user, codes } = res
return {business, company, platformAccount, user, codes, userSatatus: true}
},
// 退出登录
SYSTEM_OUT() {
......
src/view/error/404.js
......@@ -3,7 +3,7 @@ import React from 'react'
const Page = ({ history }) => {
return (
<div>
<h1 onClick={() => history.push('/')} >404错误,点击回到首页</h1>
<h1 onClick={() => history.push('/login')} >404错误,点击回到首页</h1>
</div>
)
}
......
src/view/login/index.js
import React, { useState, useEffect } from 'react'
import { Form, Input, Button, Checkbox, message } from 'antd'
import { UserOutlined, UnlockOutlined, MessageOutlined } from '@ant-design/icons'
import { APP } from '@/config'
import { sha256 } from 'js-sha256'
import { login, sendCode } from '@/api/login'
import View from './view'
import connect from '@/store/modules/route/connect'
import './index.scss'
const PassWordLoginItem = ({ checkPhone }) => (
<>
<Form.Item
name="phone"
rules={[{ required: true, validator: checkPhone }]}
>
<Input
placeholder="请输入手机号码"
prefix={<UserOutlined />}
/>
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: '登录密码不能为空' }]}
>
<Input.Password
placeholder="请输入登录密码"
prefix={<UnlockOutlined />}
/>
</Form.Item>
<p style={{ position: 'relative', height: 22 }}>
<a href={APP.findPasswordLink + window.location.origin + '/login'} className="forget-password">忘记密码?</a>
</p>
</>
)
const CodeLoginItem = ({countDown, btnDisable, getCode, checkPhone, btnLoading}) => (
<>
<Form.Item
name="phone"
rules={[{ required: true, validator: checkPhone }]}
>
<Input
placeholder="请输入手机号码"
prefix={<UserOutlined/>}
/>
</Form.Item>
<Form.Item
name="code"
rules={[{ required: true, message: '验证码不能为空' }]}
>
<section style={{display: 'flex'}}>
<Input
placeholder="请输入验证码"
prefix={<MessageOutlined/>}
/>
<Button
loading={btnLoading && countDown <= 0}
disabled={btnDisable || countDown > 0}
onClick={getCode}
className="btn-login-code"
>
{countDown <= 0 ? '获取验证码' : (countDown + 's')}
</Button>
</section>
</Form.Item>
</>
)
function LoginPage({ history }) {
const [tabKey, setTabKey] = useState(0)
// 获取验证码按钮 display
const [btnDisable, setBtnDisable] = useState(true)
// 获取验证码按钮 loading
const [btnLoading, setBtnLoading] = useState(false)
// 获取验证码按钮 倒计时
const [countDown, setCountDown] = useState(0)
// 登录按钮 loading
let [loginbtnLoading, setLoginbtnLoading] = useState(false)
const [form] = Form.useForm()
const onFinish = (data) => {
console.log('登陆',data)
let { phone, password, code } = data
const body = {
code,
loginAccount: phone,
loginPassword: password ? sha256(password) : '',
applyPlatform: [0],
applyCarrier: [0],
operationChannel: 0
}
setLoginbtnLoading(true)
login(body).then(res => {
console.log(res)
setLoginbtnLoading(false)
}).catch(err => {
setLoginbtnLoading(false)
message.error(err)
}).finally(() => {
console.log(111)
})
}
// 切换登陆方式
const changeLoginTabs = (num) => {
setTabKey(num)
}
// 获取验证码返回结果处理函数
function handleGetCode() {
let count = 60
let timer = null
timer = setInterval(() => {
setCountDown(count)
count--;
if (count < 0) {
clearInterval(timer)
}
}, 1000)
}
// 获取验证码
const getCode = () => {
let phone = form.getFieldsValue().phone
setBtnLoading(true)
const body = {
type: 'LOGIN',
phone
}
sendCode(body).then(res => {
setBtnLoading(false)
message.success('发送成功');
handleGetCode()
}).catch(err => {
setBtnLoading(false)
message.error(err)
console.error(err)
})
}
// 校验手机号码
let checkPhone = (rule, value) => {
const regular = /^1[3456789]\d{9}$/
if (!regular.test(value)) {
setBtnDisable(true)
return Promise.reject("手机号码格式错误")
} else {
setBtnDisable(false)
return Promise.resolve();
}
}
return (
<div className="login-box">
<header className="login-header">
<section className='logo-box'>
<img src={require('./images/xbd_logo.png')} width="102" height="36" alt="信巴迪logo"/>
<span className="platform-name">卖家工作台</span>
</section>
</header>
<div className="content-wrap">
<div className="content">
<section className="login-bg"></section>
<section className="login-controller-box">
<section className="tabs-box">
<span className={`tabs-item ${tabKey===0&&'tab-active'}`} onClick={()=>{changeLoginTabs(0)}}>密码登录</span>
<span className={`tabs-item ${tabKey===1&&'tab-active'}`} onClick={()=>{changeLoginTabs(1)}}>验证码登录</span>
</section>
<Form
form={form}
onFinish={onFinish}
initialValues={{ remember: true }}
className="login-form"
>
{
tabKey===0?<PassWordLoginItem checkPhone={checkPhone} />:(
<CodeLoginItem
countDown={countDown}
btnDisable={btnDisable}
getCode={getCode}
checkPhone={checkPhone}
btnLoading={btnLoading}
/>
)
}
<Form.Item name="btnSubmit" style={{marginBottom:16}}>
<Button
type="primary"
style={{ width: '100%', height: 48, fontSize: 18 }}
htmlType="submit"
loading={loginbtnLoading}
>登录</Button>
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
style={{marginBottom: 20}}
>
<Checkbox style={{ userSelect: 'none' }} noStyle>记住账号</Checkbox>
</Form.Item>
<p style={{ 'textAlign': 'center' }}>
还没有账号？
<a
href={APP.registerLink + window.location.origin + '/login'}
style={{
color: '#1892FF',
cursor: 'pointer',
userSelect: 'none'
}}
>
马上去注册
</a>
</p>
</Form>
</section>
</div>
</div>
<footer>
<section className="footer-info-box">
</section>
</footer>
</div>
)
}
export default LoginPage
\ No newline at end of file
export default connect(View)
\ No newline at end of file
src/view/login/view.js 0 → 100644
import React, { useState, useEffect } from 'react'
import { Form, Input, Button, Checkbox, message } from 'antd'
import { UserOutlined, UnlockOutlined, MessageOutlined } from '@ant-design/icons'
import { APP } from '@/config'
import { sha256 } from 'js-sha256'
import { login, sendCode } from '@/api/login'
import { setToken } from 'xbd-cookie'
import './index.scss'
const PassWordLoginItem = ({ checkPhone }) => (
<>
<Form.Item
name="phone"
rules={[{ required: true, validator: checkPhone }]}
>
<Input
placeholder="请输入手机号码"
prefix={<UserOutlined />}
/>
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: '登录密码不能为空' }]}
>
<Input.Password
placeholder="请输入登录密码"
prefix={<UnlockOutlined />}
/>
</Form.Item>
<p style={{ position: 'relative', height: 22 }}>
<a href={APP.findPasswordLink + window.location.origin + '/login'} className="forget-password">忘记密码?</a>
</p>
</>
)
const CodeLoginItem = ({countDown, btnDisable, getCode, checkPhone, btnLoading }) => (
<>
<Form.Item
name="phone"
rules={[{ required: true, validator: checkPhone }]}
>
<Input
placeholder="请输入手机号码"
prefix={<UserOutlined/>}
/>
</Form.Item>
<Form.Item
name="code"
rules={[{ required: true, message: '验证码不能为空' }]}
>
<section style={{display: 'flex'}}>
<Input
placeholder="请输入验证码"
prefix={<MessageOutlined/>}
/>
<Button
loading={btnLoading && countDown <= 0}
disabled={btnDisable || countDown > 0}
onClick={getCode}
className="btn-login-code"
>
{countDown <= 0 ? '获取验证码' : (countDown + 's')}
</Button>
</section>
</Form.Item>
</>
)
function LoginPage({ history, SYSTEM_LOGIN }) {
const [tabKey, setTabKey] = useState(0)
// 获取验证码按钮 display
const [btnDisable, setBtnDisable] = useState(true)
// 获取验证码按钮 loading
const [btnLoading, setBtnLoading] = useState(false)
// 获取验证码按钮 倒计时
const [countDown, setCountDown] = useState(0)
// 登录按钮 loading
let [loginbtnLoading, setLoginbtnLoading] = useState(false)
const [form] = Form.useForm()
const onFinish = (data) => {
let { phone, password, code } = data
const body = {
code,
loginAccount: phone,
loginPassword: password ? sha256(password) : '',
applyPlatform: [0],
applyCarrier: [0],
operationChannel: 0
}
setLoginbtnLoading(true)
login(body)
.then((res) => {
loginbtnLoading && setLoginbtnLoading(false)
setToken(res.sessionid)
SYSTEM_LOGIN(res)
})
.catch(err => {
setLoginbtnLoading(false)
message.error(err)
})
}
// 切换登陆方式
const changeLoginTabs = (num) => {
setTabKey(num)
}
// 获取验证码返回结果处理函数
function handleGetCode() {
let count = 60
let timer = null
timer = setInterval(() => {
setCountDown(count)
count--;
if (count < 0) {
clearInterval(timer)
}
}, 1000)
}
// 获取验证码
const getCode = () => {
let phone = form.getFieldsValue().phone
setBtnLoading(true)
const body = {
type: 'LOGIN',
phone
}
sendCode(body).then(res => {
setBtnLoading(false)
message.success('发送成功');
handleGetCode()
}).catch(err => {
setBtnLoading(false)
message.error(err)
console.error(err)
})
}
// 校验手机号码
let checkPhone = (rule, value) => {
const regular = /^1[3456789]\d{9}$/
if (!regular.test(value)) {
setBtnDisable(true)
return Promise.reject("手机号码格式错误")
} else {
setBtnDisable(false)
return Promise.resolve();
}
}
return (
<div className="login-box">
<header className="login-header">
<section className='logo-box'>
<img src={require('./images/xbd_logo.png')} width="102" height="36" alt="信巴迪logo"/>
<span className="platform-name">卖家工作台</span>
</section>
</header>
<div className="content-wrap">
<div className="content">
<section className="login-bg"></section>
<section className="login-controller-box">
<section className="tabs-box">
<span className={`tabs-item ${tabKey===0&&'tab-active'}`} onClick={()=>{changeLoginTabs(0)}}>密码登录</span>
<span className={`tabs-item ${tabKey===1&&'tab-active'}`} onClick={()=>{changeLoginTabs(1)}}>验证码登录</span>
</section>
<Form
form={form}
onFinish={onFinish}
initialValues={{ remember: true }}
className="login-form"
>
{
tabKey===0?<PassWordLoginItem checkPhone={checkPhone} />:(
<CodeLoginItem
countDown={countDown}
btnDisable={btnDisable}
getCode={getCode}
checkPhone={checkPhone}
btnLoading={btnLoading}
/>
)
}
<Form.Item name="btnSubmit" style={{marginBottom:16}}>
<Button
type="primary"
style={{ width: '100%', height: 48, fontSize: 18 }}
htmlType="submit"
loading={loginbtnLoading}
>登录</Button>
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
style={{marginBottom: 20}}
>
<Checkbox style={{ userSelect: 'none' }} noStyle>记住账号</Checkbox>
</Form.Item>
<p style={{ 'textAlign': 'center' }}>
还没有账号？
<a
href={APP.registerLink + window.location.origin + '/login'}
style={{
color: '#1892FF',
cursor: 'pointer',
userSelect: 'none'
}}
>
马上去注册
</a>
</p>
</Form>
</section>
</div>
</div>
<footer>
<section className="footer-info-box">
</section>
</footer>
</div>
)
}
export default LoginPage
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!