react项目中实现登录注册简单粗暴感悟
全局安装react官方推荐脚手架 create-react-app
npm install create-react-app -g
创建react项目
create-react-app react-login-register
进入项目并运行
npm start
image.png
安装此demo中各种依赖
npm install antd-mobile -S // UI框架
npm install redux -S // redux
npm install react-redux -S // react-redux
npm install react-router-dom -S // react路由
npm install axios -S // react请求交互
npm install redux-thunk -S // redux中间件 配合redux解决异步问题
npm install babel-plugin-transform-decorators-legacy -D // 配合react-redux 支持@装饰器
npm install mongoose -D // 安装mondoose MongoDB数据库插件
npm install express -S // 基于node开发，搭建请求环境
npm install babel-plugin-import -S antd-mobile按需加载babel插件
npm install body-parser -S 后台数据接口用户传进来的参数解析插件
npm install cookie-parser -S 通过cookie存储用户登录状态
PS: 合并安装飞起来~
npm run eject // 释放react关于webpack的封装配置
sudo brew install mongodb（我这里是mac安装方式，其他平台可百度下）
删掉 src目录下面所有文件并新建index.js
// index.js
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<div>Demo</div>,
document.getElementById('root')
)
image.png
在src目录新建一下文件和文件夹
image.png
components 放置组件
containers 放置页面
redux 放置redux元素集合文件（定义各种常量，reducers, create actions）
reducer.js 集合redux里面各种文件
image.png
containers 新建登录注册两个页面基本内容
import React, {Component} from 'react'
class Login extends Component {
render() {
return (
<div>登录页面</div>
)
}
}
export default Login
redux 新建user.redux.js
export function user(state=0,action) {
switch (action.type) {
default:
return state;
}
}
reducer.js 引入user.redux.js 并合并
import {combineReducers} from 'redux'
import {user} from './redux/user.redux'
export default combineReducers({user})
components 新建 checkLogin 判断用户是否登录
import {Component} from 'react';
import {withRouter} from 'react-router-dom'
@withRouter
class CheckLogin extends Component {
componentDidMount() {
// 在这里请求相关接口判断用户是否完成登录
axios.get('xxxxx')
.then(res => {
if(res.status === 200) {
if(res.data.code === 0) {
}else {
this.props.history.push('/login')
}
}
})
}
render() {
return null;
}
}
export default CheckLogin;
index.js完成登录注册准备工作
import React from 'react'
import ReactDOM from 'react-dom'
// 配合applyMiddleware解决redux异步问题
import thunk from 'redux-thunk'
// createStore接受reducer生成stote compose合并生成store其他数据 applyMiddleware接受thunk解决redux异步问题
import {createStore, compose, applyMiddleware} from 'redux'
// Provider负责传递store
import {Provider} from 'react-redux'
// 引入react-router-dom各种路由元素
import {BrowserRouter as Router, Route} from 'react-router-dom'
// 引入判断是否登录组件
import CheckLogin from './components/checkLogin/CheckLogin'
// 引入页面路由组件
import Login from './containers/login/login'
import Register from './containers/register/register'
// 生成store
import reducer from './reducer'
const store = createStore(reducer, compose(
applyMiddleware(thunk), //解决redux异步问题
window.devToolsExtension ? window.devToolsExtension() : f => f // chrome控制台redux工具
))
// 页面渲染
ReactDOM.render(
<Provider store={store}>
<Router>
<div className="react-login-register">
<CheckLogin></CheckLogin>
<Route path='/login' component={Login}></Route>
<Route path='/register' component={Register}></Route>
</div>
</Router>
</Provider>,
document.getElementById('root')
)
从控制台，可以看到redux相关信息（user: 定义的reducer user 值是返回state的初始值0）
PS：前提是chrome安装redux插件Redux DevTools
image.png
在package.json的babel里添加一下插件
"plugins": [
"transform-decorators-legacy", // 配合react-redux 的connent 支持装饰器写法
[
"import",
{
"libraryName": "antd-mobile",
"style": "css"
}
] // antd-mobile 按需加载
]
接下来完善登录注册页面的UI 和基本交互逻辑
登录页面
// login.js
import React, {Component} from 'react'
import {List,InputItem,WingBlank,WhiteSpace, Button} from 'antd-mobile'
import Logo from '../../components/logo/logo'
class Login extends Component {
render() {
return (
<div className="page-login">
<Logo />
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<List>
<InputItem>lbj-账号</InputItem>
<InputItem>lbj-密码</InputItem>
</List>
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<WingBlank>
<Button type="primary">登录</Button>
<WhiteSpace></WhiteSpace>
<Button onClick={this.handleGoRegister.bind(this)} type="primary">去注册</Button>
</WingBlank>
</div>
)
}
/*
* 去注册
* */
handleGoRegister() {
this.props.history.push('/register');
}
}
export default Login
注册页面
import React, {Component} from 'react'
import {List, InputItem, WingBlank, WhiteSpace, Button, Radio} from 'antd-mobile'
import Logo from '../../components/logo/logo'
class Register extends Component {
constructor(props) {
super(props);
this.state = {
username: '', //账号
pwd: '', // 密码
pwdConfirm: '', // 确认密码
type: 'worker', // 用户类型 默认求职者
}
}
render() {
const RadioItem = Radio.RadioItem
return (
<div className="page-register">
<Logo/>
<List>
<InputItem onChange={value => this.handleChange('username', value)}>lbj-账号</InputItem>
<InputItem onChange={value => this.handleChange('pwd', value)}>lbj-密码</InputItem>
<InputItem onChange={value => this.handleChange('pwdConfirm', value)}>lbj-确认</InputItem>
</List>
<WhiteSpace></WhiteSpace>
<List>
<RadioItem
onClick={() => this.handleChange('type', 'worker')}
checked={this.state.type === 'worker'}>牛人 </RadioItem>
<RadioItem
onClick={() => this.handleChange('type', 'boss')}
checked={this.state.type === 'boss'}>BOSS</RadioItem>
</List>
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<WhiteSpace></WhiteSpace>
<WingBlank>
<Button type="primary">登录</Button>
<WhiteSpace></WhiteSpace>
<Button onClick={this.handleGoLogin.bind(this)} type="primary">已有账号，去登录</Button>
</WingBlank>
</div>
)
}
/*
* 去登录
* */
handleGoLogin() {
this.props.history.push('/login')
}
/*
* 绑定表单值
* */
handleChange(key, val) {
this.setState({
[key]: val
})
}
}
export default Register
下一步，就是搭建数据库，之前安装的MongoDB，mongoose, express派上了用场
项目根目录下面新建server文件夹
文件夹下面新建server.js和user.js
server.js
const express = require('express');
const userRouter = require('./user')
// 新建app
const app = express();
app.use('/user',userRouter)
app.listen(8000, () => {
`server is running at port 8000 success~~~`
})
user.js
const express = require('express')
// 生成express路由中间件
const Router = express.Router();
// CheckLogin.js 用户查询用户是否登录的接口
Router.get('/info', (req, res) => {
return res.json({code: 1,msg: '未登录'})
})
module.exports = Router
进入server文件夹 运行
npm install nodemon -g // nodemon 是基于node的实时监听的工具
nodemon server.js
image.png
此时可以看到请求地址已经可以访问
这里抛出一个问题，
项目地址是http://localhost:3001/，
请求地址是http://localhost:8000/user/info
由于浏览器同源策略限制，直接请求会存在着跨域问题（协议，域名，端口任何一个不一致，即视为跨域），所以这里可以通过代理请求的方式解决跨域问题
在package.json 添加 "proxy": "http://localhost:8000"
在checkLogin.js里面请求user/info 来判断是否登录
继续完善 checkLogin
import {Component} from 'react';
import {withRouter} from 'react-router-dom' // 由于checkLogin 不是路由，要想用跳转的话得引入withRouter
@withRouter
class CheckLogin extends Component {
componentDidMount() {
// 登录注册两个页面不需要判断
if(filterCheck.indexOf(this.props.location.pathname) > -1) {
return;
}
// 在这里请求相关接口判断用户是否完成登录
axios.get('/user/info')
.then(res => {
if(res.status === 200) {
if(res.data.code === 0) {
}else {
this.props.history.push('/login')
}
}
})
}
render() {
return null;
}
}
export default CheckLogin;
中场休息完继续
通过上面的checkLogin，访问其他页面在没有登录的情况下，自动跳转到登录页面。
从注册页面开始完善
因为项目是结合redux来操作，所以登录注册都是生成各种action,通过之前写好的user这个reducer来改变state的初始值
在注册页面写好register方法并导出给注册按钮调用，从而生成action，给reducer使用
// user.redux.js
import axios from 'axios' // 用axios做请求
// 定义常量
const REGISTER_SUCCESS = 'REGISTER_SUCCESS'; // 注册成功
const TODO_ERRSHOW = 'TODO_ERRSHOW'; // 操作失败
// state初始值
let initState = {
redirectTo: '', // 完成之后跳到哪里
username: '', // 账号
pwd: '', // 密码
pwdConfirm: '', // 确认密码
type: '', // 用户类型
msg: '', // 错误消息
isLogin: false // 是否登录
}
export function user(state=initState,action) {
switch (action.type) {
case REGISTER_SUCCESS:
return {...state,...action.data, msg: '', redirectTo: '/login'}
case TODO_ERRSHOW:
return {...state,msg: action.msg}
default:
return state;
}
}
function registerFail(msg) {
return {
msg,
type: TODO_ERRSHOW
}
}
function registerSuccess(data) {
return {
data,
type: REGISTER_SUCCESS
}
}
// register是一个action creator ，返回的action供user这个reducer使用，从而改变state
export function register({username,pwd,pwdConfirm,type}) {
if(!username || !pwd) {
registerFail('账号密码不能为空')
}
if(pwd !== pwdConfirm) {
registerFail('两次密码不一致')
}
return dispatch => {
axios.post('/user/register',{username,pwd,type})
.then(res => {
if(res.status === 200 && res.data.code === 0) {
dispatch(registerSuccess(res.data.data))
}else {
dispatch(registerFail(res.data.msg))
}
})
}
}
接下来在register.js里面的注册按钮绑定的事件调用register这个方法
// register.js
import {connect} from 'react-redux'
import {register} from '../../redux/user.redux'
import Logo from '../../components/logo/logo'
@connect(
state=> state,
{register}
)
注意上面几行代码，之前在package.json提到的plugins transform-decorators-legacy是为上面的connect装饰器支持@写法准备的。
装饰器connnect接受两个参数，给props定义的数据和函数
// 注册按钮绑定的事件
/*
* 注册
* */
handleRegister() {
this.props.register(this.state)
}
因为在register这个函数里面，做了表单验证判断后开始请求“/user/register”这个接口，那么接下来完善这个接口
登录注册的接口设计到数据库，这里选用了mongoDB这种类型的数据库最为后台数据支撑
新建数据模型
// server/model.js
const mongoose = require('mongoose')
// mongoose 连接这个数据库并生成"react-login-register"这个集合
mongoose.connect('mongodb://127.0.0.1:27017/react-login-register')
// 连接成功后的打印
mongoose.connection.on('connected',() => {
console.log('mongo connect success');
})
// 创建数据模型
const models = {
user: {
'username': {type:String, require: true}, // 账号
'pwd': {type:String, require: true}, // 密码
'type': {type:String, require: true} // 用户类型
}
}
// 遍历生成数据模型
for (let m in models) {
mongoose.model(m, new mongoose.Schema(models[m]))
}
// 导出供其他地方获取
module.exports = {
getModel: function (m) {
return mongoose.model(m)
}
}
// server/user.js
// 获取注册用户列表
Router.get('/list',(req,res) => {
//清空所有用户
// User.remove({},(err,doc) => {
// if(!err) {
// console.log(`用户清空成功`);
// }
// })
// 在user这个数据模型中查询所有用户
User.find({},(err,doc) => {
if(!err) {
return res.json({code: 0, data: doc,msg: '用户列表获取成功'})
}
})
})
完成注册接口
// user.js
const express = require('express')
const model = require('./model')
const User = model.getModel('user')
// md5加密
const utils = require('utility')
// 生成express路由中间件
const Router = express.Router();
// 封装MD5加密规则
function my_md5(pwd) {
const xiao = 'akdf352FHhjfFHI34=123-`.WRL23K23fhKJFHkhFJ@1231!*@%!^';
return utils.md5(utils.md5(xiao + pwd))
}
//过滤调不想暴露的数据
const _filter = {"__v": 0, "pwd": 0}
// CheckLogin.js 用户查询用户是否登录的接口
Router.get('/info', (req, res) => {
return res.json({code: 1, msg: '未登录'})
})
// 获取注册用户列表
Router.get('/list', (req, res) => {
//清空所有用户
// User.remove({}, (err, doc) => {
// if (!err) {
// console.log(`用户清空成功`);
// }
// })
// 在user这个数据模型中查询所有用户
User.find({}, (err, doc) => {
if (!err) {
return res.json({code: 0, data: doc, msg: '用户列表获取成功'})
}
})
})
// 注册接口
Router.post('/register', (req, res) => {
const {username, pwd, type} = req.body;
// 在user这个数据模型中查询用户注册的账号是否存在
User.findOne({username}, (err, doc) => {
//
if (doc) {
return res.json({code: 1, msg: '用户已存在'})
}
if (err) {
return res.json({code: 1, msg: '服务器异常'})
}
User.create({username, pwd: my_md5(pwd), type}, (err, doc) => {
if (err) {
return res.json({code: 1, msg: '服务器异常'})
}
return res.json({code: 0, data: doc})
})
})
})
module.exports = Router
// 这里注意，因为要接受参数，所以在server.js安装body-parser并app.use(bodyParser.json())
register.js
{this.props.user.redirectTo ? <Redirect to={this.props.user.redirectTo}></Redirect>:null} //注册完成后跳转到登录页面
<div className="err-show">{this.props.user.msg ? this.props.user.msg : ''}</div> //显示错误信息
至此注册部分基本完成
继续
接下来完成登录部分
大致思路是绑定事件
// login.js
/*
* 登录
* */
handleLogin() {
this.props.login(this.state)
}
定义执行调用actions creator
// login.js
import {connect} from 'react-redux'
@connect (
state => state,
{login}
)
编写login actions creator
// user.redux.js
// 登录时候调用
export function login({username,pwd}) {
if(!username || !pwd) {
return toDoFail('账号密码不能为空')
}
return dispatch => {
axios.post('/user/login',{username,pwd})
.then(res => {
if(res.status === 200 && res.data.code === 0) {
dispatch(loginSuccess(res.data.data))
}else {
dispatch(toDoFail(res.data.msg))
}
})
}
}
编写user/login这个接口
// user.js
Router.post('/login', (req, res) => {
const {username, pwd} = req.body;
console.log(username);
User.findOne({username, pwd: my_md5(pwd)}, _filter, (err, doc) => {
if (!doc) {
return res.json({code: 1, msg: '账号密码不正确'})
}
if (err) {
return res.json({code: 1, msg: '服务器异常'})
}
res.cookie('userId',doc._id) // 登录成功保存cookie
return res.json({code: 0, msg: '登录成功', data: doc})
})
})
登录的步骤和注册部分很多相似之处
接下来，完善判断用户是否登录的接口，'/user/info'
// user.js
Router.get('/info', (req, res) => {
const {userId} = req.cookies
if (!userId) {
res.json({code: 1, msg: '用户未登录'})
}
User.findOne({_id: userId}, _filter, (err, doc) => {
if (err) {
return res.json({code: 1, msg: '服务器异常'})
}
if (doc) {
return res.json({code: 0, msg: '用户已登录',data: doc})
}
})
})
PS: server.js 记得使用cookie插件
const cookieParser = require('cookie-parser')
app.use(cookieParser())
最后，我们在登录完成之后所进入的页面展示用户的基本信息
// checkLogin.js
axios.get('/user/info')
.then(res => {
console.log(res);
if(res.status === 200) {
if(res.data.code === 0) {
this.props.getUserInfo(res.data.data)
}else {
this.props.history.push('/login')
}
}
})
// user.redux.js
// 登录之后获取用户信息
export function getUserInfo(userInfo) {
return {
type: GET_USER_INFO,
payload: userInfo
}
}
对此次demo完善退出登录
跳转到login页面，清空cookies
// workerInfo.js
import React, {Component} from 'react';
import {connect} from 'react-redux'
import {Button,WingBlank} from 'antd-mobile'
import {Redirect} from 'react-router-dom'
import {loginOut} from '../../redux/user.redux'
@connect(
state => state,
{loginOut}
)
class WorkerInfo extends Component {
render() {
return (
<div>
{this.props.user.redirectTo ? <Redirect to={this.props.user.redirectTo}></Redirect>:null}
<h3>worker信息页面</h3>
<p>用户名称:{this.props.user.username} </p>
<p>用户类型:{this.props.user.type} </p>
<WingBlank>
<Button onClick={this.handleLoginOut.bind(this)} type="primary">退出登录</Button>
</WingBlank>
</div>
);
}
/*
* 退出登录
* */
handleLoginOut() {
this.props.loginOut();
}
}
export default WorkerInfo;
编写退出登录action creator
// 退出登录调用
export function loginOut() {
return dispatch => {
axios.get('/user/loginOut')
.then(res => {
if (res.status === 200 && res.data.code === 0) {
dispatch(loginOutSuccess(res.data.data))
} else {
dispatch(toDoFail(res.data.msg))
}
})
}
}
编写退出登录接口
// user.js
// 退出登录
Router.get('/loginOut', (req, res) => {
const {userId} = req.cookies;
if(!userId) {
res.json({code: 1, msg: '服务器异常'})
}
res.cookie('userId','');
return res.json({code: 0, msg:'退出成功'})
})
到此整个demo写完
留下一个报错信息，但是对功能没有影响
登录或退出成功或注册成功进行页面跳转后，会报错
Warning: You tried to redirect to the same route you're currently on: "/workerInfo"
Warning: You tried to redirect to the same route you're currently on: "/bossInfo"
Warning: You tried to redirect to the same route you're currently on: "/login"
后续解决~~ 带理解~
