Skip to content

ds147000 / react-project-storage

Go to a project
Commit f81f4556 by 郑永杰
Options

登陆更新

2 parents 4b08e1c4 da53ce0d
Inline Side-by-side
Showing with 397 additions and 48 deletions
package-lock.json
...@@ -8056,6 +8056,11 @@ ...@@ -8056,6 +8056,11 @@
"resolved": "http://47.107.176.206:8089/repository/xbdnpm/js-cookie/-/js-cookie-2.2.1.tgz", "resolved": "http://47.107.176.206:8089/repository/xbdnpm/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg=" "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
}, },
"js-sha256": {
"version": "0.9.0",
"resolved": "http://47.107.176.206:8089/repository/xbdnpm/js-sha256/-/js-sha256-0.9.0.tgz",
"integrity": "sha1-C4msFmWD6R75EjZEvTxTNM6dCWY="
},
"js-tokens": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "http://47.107.176.206:8089/repository/xbdnpm/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "http://47.107.176.206:8089/repository/xbdnpm/js-tokens/-/js-tokens-4.0.0.tgz",
......
package.json
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"antd": "^4.4.2", "antd": "^4.4.2",
"axios": "^0.19.2", "axios": "^0.19.2",
"js-sha256": "^0.9.0",
"loading-bar": "^0.2.7", "loading-bar": "^0.2.7",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
......
src/api/login.js 0 → 100644
import http from '@/libs/fetch'
export const login = (data) => {
return http.request({
url: '/user/sysLogin/login',
method: 'post',
data
})
}
export const sendCode = (data) => {
return http.request({
url: '/user/sysLogin/' + data.type + '/captcha?phone=' + data.phone,
data
})
}
\ No newline at end of file
src/config/index.js
...@@ -136,7 +136,11 @@ const APP = { ...@@ -136,7 +136,11 @@ const APP = {
return types['t'+val]?types['t'+val]:'' return types['t'+val]?types['t'+val]:''
}, },
/**@description 其他菜单的域名*/ /**@description 其他菜单的域名*/
othreDomain: getProcessValue('http://seller-dev.b2bwings.com', 'http://seller-dev.b2bwings.com', 'https://seller.b2bwings.com') othreDomain: getProcessValue('http://seller-dev.b2bwings.com', 'http://seller-dev.b2bwings.com', 'https://seller.b2bwings.com'),
// 注册链接
registerLink: 'http://xbd-dev.b2bwings.com/register?callbackUrl=',
// 找回密码链接
findPasswordLink: 'http://xbd-dev.b2bwings.com/findPassword?callbackUrl='
} }
export default { USER_CONFIG, APP } export default { USER_CONFIG, APP }
......
src/libs/http-request.js
...@@ -105,7 +105,7 @@ class HttpRequest { ...@@ -105,7 +105,7 @@ class HttpRequest {
return data ? data : { data, list } return data ? data : { data, list }
case 200: case 200:
if (res.config.url.indexOf(this.loginUrl) !== -1) { if (res.config.url.indexOf(this.loginUrl) !== -1) {
this.saveLoginInfo(data.jwt, data.sessionid, data.user.vid, res.config.data) //保存登陆数据 this.saveLoginInfo( res.data ) //保存登陆数据
} }
return Array.isArray(data)?data:(typeof data === 'object' ? {message, code, ...data} : {data, message}) return Array.isArray(data)?data:(typeof data === 'object' ? {message, code, ...data} : {data, message})
// case 400001: // case 400001:
...@@ -132,10 +132,9 @@ class HttpRequest { ...@@ -132,10 +132,9 @@ class HttpRequest {
* @param {*} jwt token * @param {*} jwt token
* @param {*} data 请求数据体 * @param {*} data 请求数据体
*/ */
saveLoginInfo(jwt, sessionid, vid, data) { saveLoginInfo(res) {
data = JSON.parse(data) store.dispatch.user.SYSTEM_LOGIN(res)
const { applyCarrier, applyPlatform } = data     store.dispatch.route.change(res.menu)
store.commit('SYSTEM_LOGIN', { jwt, sessionid, vid, applyCarrier, applyPlatform })
} }
} }
......
src/router/modules/basisRoute.js
import loadable from '@loadable/component' import loadable from '@loadable/component'
const exact = true const exact = true
export default [ export default [ ]
{ \ No newline at end of file
url: '/404',
exact,
component: loadable(() => import('@/view/error/404')) // 懒加载
}
]
\ No newline at end of file
src/router/router-view.js
...@@ -12,14 +12,14 @@ import { getMenu } from '@/api/user' ...@@ -12,14 +12,14 @@ import { getMenu } from '@/api/user'
import { Modal } from 'antd' import { Modal } from 'antd'
import error401 from "@/view/error/401" import error401 from "@/view/error/401"
import error404 from "@/view/error/404" import error404 from "@/view/error/404"
import fullScreenRoute from './modules/fullScreenRoute' import fullScreenRoute from './modules/fullScreenRoute'
/** 获取全部路由的路径 */ /** 获取全部路由的路径 */
const getAllRouterName = route => route.map(e => e.url) const getAllRouterName = route => route.map(e => e.url)
/** 路由视图 */ /** 路由视图 */
const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSatatus, SYSTEM_LOGIN}) => { const RouterView = ({ basisRoute = [], serviceRoute = [], userRoute = [], userSatatus, SYSTEM_LOGIN }) => {
const [openRoute, setOpenRoute] = useState([]) const [openRoute, setOpenRoute] = useState([])
const history = useHistory() const history = useHistory()
...@@ -30,7 +30,7 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat ...@@ -30,7 +30,7 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat
const newRoutes = allRoute.map(e => { const newRoutes = allRoute.map(e => {
const index = serviceRoute.findIndex(service => service.url === e.url) const index = serviceRoute.findIndex(service => service.url === e.url)
const newE = {...e} const newE = { ...e }
if (index !== -1) if (index !== -1)
newE.component = serviceRoute[index].component newE.component = serviceRoute[index].component
...@@ -38,13 +38,13 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat ...@@ -38,13 +38,13 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat
const indexOfName = allName.findIndex(url => url === e.url) const indexOfName = allName.findIndex(url => url === e.url)
if (indexOfName !== -1) if (indexOfName !== -1)
newE.component = serviceRoute[index].component newE.component = serviceRoute[index].component
else else
newE.component = () => { newE.component = () => {
// location.href = APP.othreDomain + newE.url // location.href = APP.othreDomain + newE.url
return (<>{newE.url}</>) return (<>{newE.url}</>)
} }
} }
return newE return newE
}) })
...@@ -54,8 +54,8 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat ...@@ -54,8 +54,8 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat
useEffect(() => { useEffect(() => {
const token = getToken() const token = getToken()
if (userSatatus) if (userSatatus)
return return
else if (token) { else if (token) {
show() show()
http.setHeader('sessionid', token) http.setHeader('sessionid', token)
...@@ -68,30 +68,27 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat ...@@ -68,30 +68,27 @@ const RouterView = ({basisRoute = [], serviceRoute = [], userRoute = [], userSat
hide() hide()
Modal.error({ title: '错误', content: err, onOk: () => history.replace('/login') }) Modal.error({ title: '错误', content: err, onOk: () => history.replace('/login') })
}) })
} else } else
history.replace('/login') history.replace('/login')
}, []) }, [])
return ( if (userSatatus)
<> return (
{!userSatatus ? <Layout>
<Layout>
<Switch>
{basisRoute.map(e => <Route path={e.url} exact={e.exact} component={Guards(e.component)} key={e.url} />)}
{openRoute.map(e => <Route path={e.url} exact={e.exact} component={Guards(e.component)} key={e.url} />)}
<Route component={error401} />
</Switch>
</Layout>
:
<Switch> <Switch>
{ {basisRoute.map(e => <Route path={e.url} exact={e.exact} component={Guards(e.component)} key={e.url} />)}
fullScreenRoute.map(e => <Route path={e.url} exact={e.exact} component={Guards(e.component)} key={e.url} />) {openRoute.map(e => <Route path={e.url} exact={e.exact} component={Guards(e.component)} key={e.url} />)}
} <Route component={Guards(error401)} />
<Route component={error404} />
</Switch> </Switch>
} </Layout>
</> )
) else
return (
<Switch>
{fullScreenRoute.map(e => <Route path={e.url} exact={e.exact} component={Guards(e.component)} key={e.url} />)}
<Route component={Guards(error404)} />
</Switch>
)
} }
export default connect(RouterView) export default connect(RouterView)
\ No newline at end of file
src/view/error/401.js
...@@ -3,7 +3,7 @@ import React from 'react' ...@@ -3,7 +3,7 @@ import React from 'react'
const Page = ({ history }) => { const Page = ({ history }) => {
return ( return (
<div> <div>
<h1 onClick={() => history.push('/')} >404错误,点击回到首页</h1> <h1 onClick={() => history.push('/')} >401,暂无权限。点击回到首页</h1>
</div> </div>
) )
} }
......
src/view/login/index.js
import React from 'react' 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 './index.scss' import './index.scss'
function Login() { 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 ( return (
<div className="login-box"> <div className="login-box">
<header> <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> </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>
</footer>
</div> </div>
) )
} }
export default Login export default LoginPage
\ No newline at end of file \ No newline at end of file
src/view/login/index.scss
.login-box {
min-height: 100vh;;
background-color: #EBEBEB;
}
.login-header {
padding-left: 18.75%;
display: flex;
align-items: center;
height: 60px;
background-color: #1890FF;
.logo-box {
display: flex;
align-items: center;
color: #fff;
}
.platform-name {
margin-left: 16px;
padding-left: 12px;
border-left: 1px solid #fff;
font-size: 20px;
line-height: 28px;
}
}
.content-wrap {
background-color: #F5F6F7;
}
.content {
margin: 0 auto;
padding: 99px 0;
display: flex;
align-items: center;
width: 1024px;
.login-bg {
margin-right: 52px;
width: 581px;
height: 504px;
background-image: url(./images/login-bg.png);
background-position: 0 center;
background-repeat: no-repeat;
background-size: contain;
}
.login-controller-box {
padding: 0 33px;
width: 390px;
height: 414px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0px 4px 28px -18px
}
.tabs-box {
margin-bottom: 25px;
display: flex;
align-items: center;
font-size: 16px;
line-height: 24px;
border-bottom: 1px solid #D7D7D7;
}
.tabs-item {
position: relative;
padding: 14px 0;
flex: 1;
text-align: center;
color: #C0C5CC;
cursor: pointer;
transition: all .25s ease-in;
&::after {
content: '';
display: block;
position: absolute;
left: 50%;
bottom: -1px;
width: 2em;
height: 2px;
margin-left: -1em;
transform: scale(0);
transition: transform .25s ease-in;
}
&:hover{
font-size: 20px;
color: #1892FF;
}
}
.tab-active {
font-size: 20px;
color: #1892FF;
&::after {
transform: scale(1);;
background-color: #1892FF;
}
}
// 表单
.login-form {
.ant-input-affix-wrapper {
height: 48px;
}
.anticon {
font-size: 20px;
}
.ant-input {
font-size: 16px;
}
.btn-login-code {
margin-left: 10px;
height: 48px;
min-width: 120px;
}
.forget-password {
position: absolute;
right: 0;
top: -16px;
}
}
}
\ 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!