vue+koa2+MongoDB实现用户登录

1、接上一篇博客https://blog.csdn.net/Ag_wenbi/article/details/87914350

2、新增登录接口

vue+koa2+MongoDB实现用户登录_第1张图片

const BASEURL = "https://www.easy-mock.com/mock/5c6e0cdaf26d7049ecf044ff/shopping/";
const LOCALURL = "http://localhost:3000/";
const URL={
    shoppingMain:BASEURL+"shoppingMain",//首页请求接口
    regesiter:LOCALURL+"user/register",//注册请求接口,user要跟刚刚的引号对应
    login:LOCALURL+"user/login",//用户登录接口
}
export default URL;

2、在下图文件夹对应增加密码验证方法

vue+koa2+MongoDB实现用户登录_第2张图片

userSchema.methods={//实现登录验证时的密码验证
    comparePassword:(_password,password)=>{
        return new Promise((resolve,reject)=>{
            bcrypt.compare(_password,password,(err,isMatch)=>{
                if(!err) resolve(isMatch)
                else reject(err)
            })
        })
    }
}

3、增加后台登录接口,以及登录验证

vue+koa2+MongoDB实现用户登录_第3张图片

router.post('/login',async(ctx)=>{
    let loginUser = ctx.request.body;
    console.log(loginUser);
    let userName = loginUser.userName;
    let password = loginUser.password;
    //引入user中的model
    const user = mongoose.model('user');//获取数据库中的对应集合
    await user.findOne({userName:userName}).exec().then(async(result)=>{//从集合中查找对应的一条数据
        console.log(result);
        if(result){
            let newUser = new user();
            await newUser.comparePassword(password,result.password).then((isMatch)=>{//对比用户输入的密码与数据库中的密码是否一致
                ctx.body={
                    code : 200,
                    message : isMatch
                }
            }).catch((error)=>{
                console.log(error);
                ctx.body = {
                    code : 500,
                    message : error
                }
            })
        }else{
            ctx.body={
                code : 200,
                message : "用户名不存在"
            }
        }
    }).catch((error)=>{
        console.log(error);
        ctx.body={
            code :500,
            message:error
        }
    })
})

4、前端界面制作以及路由配置

login.vue文件内容复制register.vue文件的内容,并自行修改一些类名(如:register->login)

vue+koa2+MongoDB实现用户登录_第4张图片

5、login.vue全部内容





6、运行时记得先启动服务(控制台进入在series文件下,运行node index.js)

你可能感兴趣的:(MongoDb,Vue)