react项目实现登录注册

eact项目中实现登录注册简单粗暴感悟

全局安装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"
后续解决~~ 带理解~

作者：feXiaojin
链接：https://www.jianshu.com/p/a735096f3eda
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。