实战react技术栈+express前后端博客项目（5）-- 前后端实现登录功能_weixin_34233618的博客-程序员秘密

技术标签： ViewUI  前端  后端  javascript  

实战react技术栈+express前后端博客项目（5）-- 前后端实现登录功能

项目地址：https://github.com/Nealyang/R...

本想等项目做完再连载一波系列博客，随着开发的进行，也是的确遇到了不少坑，请教了不少人。遂想，何不一边记录踩坑，一边分享收获呢。分享当然是好的，
如果能做到集思广益，那岂不是更美。我们的口号是：坚决不会烂尾

本博客为连载代码博客同步更新博客，随着项目往后开发可能会遇到前面写的不合适的地方会再回头修改。如有不妥~欢迎兄弟们不啬赐教。谢谢！

登录部分

  • 登录截图

前端部分实现

接上篇，我们登录界面已经画完了，登录功能，涉及到异步请求。所以大致我需要需要如下几个action。请求发起action，请求结束action，错误信息提醒action，登录action，注册action以及后面免登陆我们用到的自动登录action。

因为该登录功能涉及到的都是全局的信息，所以这里我们放到index的reducer中处理

const initialState = {
    isFetching: true,
    msg: {
        type: 1,//0失败 1成功
        content: ''
    },
    userInfo: {}
};

export const actionsTypes = {
    FETCH_START: "FETCH_START",
    FETCH_END: "FETCH_END",
    USER_LOGIN: "USER_LOGIN",
    USER_REGISTER: "USER_REGISTER",
    RESPONSE_USER_INFO: "RESPONSE_USER_INFO",
    SET_MESSAGE: "SET_MESSAGE",
    USER_AUTH:"USER_AUTH"
};

export const actions = {
    get_login: function (username, password) {
        return {
            type: actionsTypes.USER_LOGIN,
            username,
            password
        }
    },
    get_register: function (data) {
        return {
            type: actionsTypes.USER_REGISTER,
            data
        }
    },
    clear_msg: function () {
        return {
            type: actionsTypes.SET_MESSAGE,
            msgType: 1,
            msgContent: ''
        }
    },
    user_auth:function () {
        return{
            type:actionsTypes.USER_AUTH
        }
    }
};

export function reducer(state = initialState, action) {
    switch (action.type) {
        case actionsTypes.FETCH_START:
            return {
                ...state, isFetching: true
            };
        case actionsTypes.FETCH_END:
            return {
                ...state, isFetching: false
            };
        case actionsTypes.SET_MESSAGE:
            return {
                ...state,
                isFetching: false,
                msg: {
                    type: action.msgType,
                    content: action.msgContent
                }
            };
        case actionsTypes.RESPONSE_USER_INFO:
            return {
                ...state, userInfo: action.data
            };
        default:
            return state
    }
}

前端登录和注册action发起

class LoginFormCom extends Component {
    constructor(props) {
        super(props);
    }

    handleLogin = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.login(values.userName,values.password)
            }
        });
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Form onSubmit={this.handleLogin} className={style.formStyle}>
                <FormItem>
                    {getFieldDecorator('userName', {
                        rules: [{required: true, message: '请输入用户名!'}],
                    })(
                        <Input prefix={<Icon type="user" style={
    {fontSize: 13}}/>} placeholder="Username"/>
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{required: true, message: '请输入密码!'}],
                    })(
                        <Input prefix={<Icon type="lock" style={
    {fontSize: 13}}/>} type="password"
                               placeholder="Password"/>
                    )}
                </FormItem>
                <FormItem>
                    <Button className={style.loginButton} type="primary" htmlType="submit">
                        登录
                    </Button>
                </FormItem>
            </Form>
        )
    }
}

const LoginForm = Form.create()(LoginFormCom);

export default LoginForm

如上代码，在handleLogin中，我们调用父组件传进来的login方法。可能得说是爷爷组件吧。罢了，就是其容器组件。

而容器组件Home.js中的代码如下：

 Home.defaultProps = {
     userInfo:{}
 };
 
 Home.propsTypes = {
     userInfo:PropTypes.object.isRequired
 };
 
 function mapStateToProps(state) {
     return{
         userInfo:state.globalState.userInfo
     }
 }
 
 function mapDispatchToProps(dispatch) {
     return{
         login:bindActionCreators(actions.get_login,dispatch),
         register:bindActionCreators(actions.get_register,dispatch)
     }
 }
 
 export default connect(
     mapStateToProps,
     mapDispatchToProps
 )(Home);

如上，我们已经定义了login和register。分别为登录和注册两个方法。在登录部分我们如上写。当然，注册功能也是如上。

### 登录、注册saga的处理

因为登录和注册都是异步的，所以这里我们需要saga去监听这个action的发起。然后对应的去处理。


export function* register (data) {
    yield put({type:IndexActionTypes.FETCH_START});
    try {
        return yield call(post, '/user/register', data)
    } catch (error) {
        yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:'注册失败',msgType:0});
    } finally {
        yield put({type: IndexActionTypes.FETCH_END});
    }
}


export function* registerFlow () {
    while(true){
        let request = yield take(IndexActionTypes.USER_REGISTER);
        let response = yield call(register, request.data);
        if(response&&response.code === 0){
            yield put({type:IndexActionTypes.SET_MESSAGE,msgContent:'注册成功!',msgType:1});
            yield put({type:IndexActionTypes.RESPONSE_USER_INFO,data:response.data})
        }

    }
}

这里我们就举例说下registerFlow吧，其实也就是监听USER_REGISTER的action。然后调用register方法，发送请求开始action（界面出现Loading），然后请求结束action。接收到请求后，拿出数据，发送拿到数据后的action

基本思路如上，代码如上，大家研究研究哈，不明白的地方，直接issue。

后段部分

router.post('/register', (req, res) => {
    let {userName, password, passwordRe} = req.body;
    if (!userName) {
        responseClient(res, 400, 2, '用户名不可为空');
        return;
    }
    if (!password) {
        responseClient(res, 400, 2, '密码不可为空');
        return;
    }
    if (password !== passwordRe) {
        responseClient(res, 400, 2, '两次密码不一致');
        return;
    }
    //验证用户是否已经在数据库中
    User.findOne({username: userName})
        .then(data => {
            if (data) {
                responseClient(res, 200, 1, '用户名已存在');
                return;
            }
            //保存到数据库
            let user = new User({
                username: userName,
                password: md5(password + MD5_SUFFIX),
                type: 'user'
            });
            user.save()
                .then(function () {
                    User.findOne({username: userName})
                        .then(userInfo=>{
                            let data = {};
                            data.username = userInfo.username;
                            data.userType = userInfo.type;
                            data.userId = userInfo._id;
                            responseClient(res, 200, 0, '注册成功', data);
                            return;
                        });
                })
        }).catch(err => {
        responseClient(res);
        return;
    });
});

后端这边其实都差不多，我们拿注册举例子。简单解释下上面代码

responseClient是封装的一个方法。代码如下：

 module.exports = {
     MD5_SUFFIX: 'eiowafnajkdlfjsdkfj大姐夫文姐到了困难额我积分那看到你@#￥%……&）（*&……）',
     md5: function (pwd) {
         let md5 = crypto.createHash('md5');
         return md5.update(pwd).digest('hex')
     },
     responseClient(res,httpCode = 500, code = 3,message='服务端异常',data={}) {
         let responseData = {};
         responseData.code = code;
         responseData.message = message;
         responseData.data = data;
         res.status(httpCode).json(responseData)
     }
 }

让你简写很多代码。然后判断用户名、密码是否为空以及两次密码是否一致。（虽然这些部分在前端也应该做判断，但是后端也尽量保障一下）。

验证用户是否已经在数据库中。如果不存在，则存储下，然后将用户信息返回。如果存在，则返回给客户端相应的信息。

注意这里我们因为用的saga，所以只要是http请求三次握手成功的，我们都是返回200.对于用户名重复、别的错误，我们统一在返回的数据中给个状态码标识。

存储的时候我们用md5加密，为了防止md5解密，我们在后面添加了一个随机的字符串。在登录的时候，拿到用户的登录密码，然后加上随机字符串，进行md5加密再与数据库数据记性比较也就OK了。

后端实现基本思路就是这些，然后对于mongoose的基本操作这里就不赘述，大家可自行查看文档。

 router.post('/login', (req, res) => {
     let {username, password} = req.body;
     if (!username) {
         responseClient(res, 400, 2, '用户名不可为空');
         return;
     }
     if (!password) {
         responseClient(res, 400, 2, '密码不可为空');
         return;
     }
     User.findOne({
         username,
         password: md5(password + MD5_SUFFIX)
     }).then(userInfo => {
         if (userInfo) {
             //登录成功
             let data = {};
             data.username = userInfo.username;
             data.userType = userInfo.type;
             data.userId = userInfo._id;
             //登录成功后设置session
             req.session.userInfo = data;
 
             responseClient(res, 200, 0, '登录成功', data);
             return;
         }
         responseClient(res, 400, 1, '用户名密码错误');
 
     }).catch(err => {
         responseClient(res);
     })
 });

## 总结

基本到这，就是实现了一个查和增的过程。也实现了前后端的基本交互。大家感受下哈~

然后大家肯定也是发现了，登录了以后，貌似每次刷新我们都要再重新登录，这并不是我们想要的。当然，这部分功能，我们将在下一篇博客中介绍。

## 项目实现步骤系列博客

## 交流

倘若有哪里说的不是很明白，或者有什么需要与我交流，欢迎各位提issue。或者加群联系我~

扫码关注我的个人微信公众号，直接回复，必有回应。分享更多原创文章。点击交流学习加我微信、qq群。一起学习，一起进步

---

欢迎兄弟们加入：

Node.js技术交流群：209530601

React技术栈：398240621

前端技术杂谈：604953717 (新建)

---
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34233618/article/details/88972620

智能推荐

XLD学习(Halcon)_halcon 轮廓的xld_phi属性好像不太对 halcon学习网_小娅_l的博客-程序员秘密

文章目录一、XLD是什么？ 二、XLD计算实例 总结 一、XLD是什么？XLD(Extended LineDescriptions)即亚像素边缘轮廓和多边形；二、XLD计算实例read_image (Test, 'D:/Pycharm/test.jpg')rgb1_to_gray(Test,GrayImage)*提取XLD轮廓threshold_sub_pix(GrayImage,Border,180)*提取XLD边缘edges_sub_pix(Gray...

css3平移、旋转、倾斜、缩放、动画效果的实现_css跷跷板动画_zhanghao86_的博客-程序员秘密

本文实现了css3的一些动画效果，包括平移、旋转、缩放、倾斜等。还包括用户界面的一些简单效果。

gensim.models.Word2Vec_阿.荣.的博客-程序员秘密

本文记录gensim.models中Word2Vec的各项参数，以便日后回顾记忆from gensim.models import Word2Vec """ 训练word to vector 的word embedding """ model = Word2Vec(x, size=50, window=5, min_count=1, workers=4, iters=10, sg=1) return model参数：x: 训练数据。size: 主要是用来设置.

android圆周运动动画,AutoCircularMotion-AutoCircularMotion(自动圆周运动MG动画循环AE脚本)下载 v1.02官方版--pc6下载站..._william张真人的博客-程序员秘密

AutoCircularMotion是一款圆环矩阵排列循环运动跟随MG动画脚本，AutoCircularMotion允许您轻松表达圆周运动。可以连接多个层并安排它们的动作，还可以设置摆动和弹跳等动作。。相关软件软件大小版本说明下载地址AutoCircularMotion是一款圆环矩阵排列循环运动跟随MG动画脚本，AutoCircularMotion允许您轻松表达圆周运动。 可以连接多个层并安排它们...

Python 批量插入数据库数据_python 批量插入数据库 float_殷殷殷先森丶的博客-程序员秘密

链接数据库咯咯咯咯咯。。。。（已出过链接文章）前期准备导入资料看图：准备所需的数据# 自动随机生成手机号码import random def phone(): phone = random.randint(13000000000, 18999999999) return phone# 自动随机生成坐标def FrameOfReference(zjy_longitude=None, zjy_latitude=None, radius=None): radius_in_de

# Vue axios 配置请求后端多个地址_vue代理多个后端地址_爱码代码的喵的博客-程序员秘密

Vue axios配置SpringCloud 多个地址地址管理url.js//不同的地址对应不同的的访问路径module.exports = { domain: { Base_M1_URL: 'http://127.0.0.1:8014', //模块一接口地址 Base_M2_URL: 'http://127.0.0.1:8015', //模块二接口地址 }}main.js配置//引入axiosimport axios from 'axios'//引入 utls.

随便推点

【亲测】独家更新CcPay多商户码支付系统,码支付易支付+个人支付宝微信二维码收款app监控+搭建教程_俩横一竖的博客-程序员秘密

「BudPay 个人收款」 的原理是通过安装到手机的App监控手机微信、支付宝的二维码扫码支付到账通知并回调开发者应用。消费者在支付的时候是扫描开发者的个人微信、支付宝收款二维码。支持API调用、手机监控APP程序等。这个程序很多人都在用，包括我，非常好用！链接：https://pan.baidu.com/s/12bOUwLQVAnn-Ieb7ZiFUkA提取码：2f47–来自百度网盘超级会员V6的分享...

VS发布Qt程序，在其他电脑上出现The application failed to start because no Qt platform plugin could be initialized._manyoudian的博客-程序员秘密

辛苦用Qt编出51单片机的上位机GUI程序，在我自己的电脑上成功运行了，但在其他电脑上却报错，傻眼了。上网查了查，第一个解决方法来了。解决方法一使用Qt官方给你准备的发布工具，windeployqt.exe来给你的程序（exe）配环境，也就是把dll（动态依赖库）放到你exe程序同目录下。首先打开cmd，操作如下：C:\User\xxxx&gt; E: //切换到E盘E:\&gt; cd E:\mysoftware\myQtExe\Relese //进入你的relese版本的程序目录E:\

pandas中的绘图函数（什么是kde）_kind='kde_冽夫的博客-程序员秘密

不难看出，matplotlib实际上是一种比较低级的工具。要组装一张图表，我们得用它的各种基础组件才行：数据展示（即图表类型：线型图、柱状图、盒形图、散布图、等值线图等）、图例、标题、刻度标签以及其他注解型信息。这是因为要根据数据制作一张完整图表通常都需要用到多个对象。在pandas中，我们有行标签、列标签以及分组信息（可能有）。这也就是说，要制作一张完整的图表，原本需要一大堆的matplotli...

ant-design tree 设置默认选中状态_如何正确设置多样性的404页面？_weixin_39812533的博客-程序员秘密

404页面就是当用户输入了错误的链接时，返回的页面。它的目的是告诉浏览者其所请求的页面不存在、已删除的页面或链接错误，服务器返回的404错误，同时引导用户使用网站其他页面而不是关闭窗口离开。所以404页面是网站必备的一个页面，它承载着用户体验与SEO优化的重任。如果站长没有设置404页面，会出现死链接，蜘蛛爬行这类网址时，不利于搜索引擎收录。设置404页面的两大好处1、引导用户不要关闭网...

【】SpringBoot-LayUI之动态表格_与乐i的博客-程序员秘密

SpringBoot后台管理项目之环境部署SpringBoot后台管理之Mybatis-GeneratorConfigSpringBoot后台管理项目之数据库SpringBoot项目之Resuful接口+工具类设计【待补】SpringBoot项目之shiro【待补】SpringBoot项目之cache...

CCF计算机软件能力认证试题练习：201709-2 公共钥匙盒_wingrez的博客-程序员秘密

公共钥匙盒 来源： 标签： 参考资料： 相似题目：题目 有一个学校的老师共用N个教室，按照规定，所有的钥匙都必须放在公共钥匙盒里，老师不能带钥匙回家。每次老师上课前，都从公共钥匙盒里找到自己上课的教室的钥匙去开门，上完课后，再将钥匙放回到钥匙盒中。 钥匙盒一共有N个挂钩，从左到右排成一排，用来挂N个教室的钥匙。一串钥匙没有固定的悬挂位置，但...

推荐文章

热门文章

相关标签