react案例—实现最简登录
react案例—实现最简登录文中代码都是片段,主要说明主要逻辑,完整代码参考 github用到的库是 react-router + react-redux通过 react-route 的快速入门我们很容易可以得到这样的路由最终效果主要逻辑我们进一步来改造,实现进来默认到登录页,登录成功看到菜单及对应组件。简单分析下需求:用户打开页面‘/’时,会先判断是否登录,我们用一...
·
react案例—实现最简登录
文中代码都是片段,主要说明主要逻辑,完整代码参考 github
用到的库是 react-router + react-redux
通过 react-route 的快速入门我们很容易可以得到这样的路由
最终效果
主要逻辑
我们进一步来改造,实现进来默认到登录页,登录成功看到菜单及对应组件。
简单分析下需求:
- 用户打开页面‘/’时,会先判断是否登录,我们用一个状态 isLogin 来判断
- 登录成功之后,isLogin 会改变为 true,并且 isLogin 和用户信息会在路由组件中传递。
这里使用 react-redux 来实现这样一个状态传递。
react-redux 提供了 connect 函数来将 state 映射到props上并传递给组件,使用之前需用 Provide 组件将原本的App包起来,将 store 作为 props 传递。
src/store/index.js
创建store
import {createStore, combineReducers} from 'redux';
import {userReducer} from "./userReducer";
const store = createStore(combineReducers({user: userReducer}))
export default store;
src/store/userReducer.js
这里的操作很简单,只需要用户登录成功后,通过store.dispatch 将 isLogin 状态更改为 true
// 定义修改规则 登录
const initalUserInfo = {
isLogin: false, //判断是否登录
};
export function userReducer(
state = {...initalUserInfo}, action) {
switch (action.type) {
case "LOGIN_SUCCESS":
return {
isLogin: true
};
default:
return state;
}
}
src/index.js
这样 store 就注册好了,接下来改造文章开头的路由
src/App.js
// 我们把之前的路由菜单改一下,非登录状态进入 /login,登录状态显示菜单
function App(){
return (
<BrowserRouter>
<Route path='/login' component={LoginPage} />
<PrivateRoute path='/'>
<ul>
<li><Link to='/'>主页</Link></li>
<li><Link to='/message'>消息</Link></li>
<li><Link to='/search'>发现</Link></li>
<li><Link to='/my'>我的</Link></li>
</ul>
<Switch>
<Route exact path='/' component={HomePage} />
<Route path='/message' component={MessagePage}/>
<Route path='/search' component={SearchPage}/>
<Route path='/my' component={MyPage}/>
</Switch>
</PrivateRoute>
</BrowserRouter>
)
}
src/route/privateRoute.js
privateRoute 在这里起到路由守卫的作用,即进入页面之前先判断登录状态
import React from 'react';
import {Redirect, Route} from 'react-router-dom';
import {connect} from 'react-redux'
export default connect(
({user}) => ({
isLogin: user.isLogin
})
)(
function PrivateRoute({children, isLogin, ...rest}) {
return (
<Route
{...rest}
render={({location}) =>
isLogin ? (
children
) : (<Redirect
to={{
pathname: "/login", state:
{redirect: location.pathname}
}}
/>
)
}
/>
);
});
src/pages/loginPage.js
登录页面的逻辑主要在登录成功之后的处理
// 表单提交
submit = ()=>{
const {username, password} = this.state;
// 这里保留一个成功的用户名和密码
if (username === 'admin' && password === 'admin'){
store.dispatch({type: 'LOGIN_SUCCESS'})
this.props.history.push('/')
} else {
store.dispatch({type: 'LOGIN_FAILURE'})
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)