技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（二）：用户登录和密码验证

技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（二）：用户登录和密码验证

相关文章：
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-1.工具和本地环境
…
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-8.模型的关联——无限层级分类
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（一）：管理员功能的实现
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（二）：用户登录和密码验证
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-9.登录功能（三）：登录的token验证
技能学习：学习使用golang（gin框架） + vue.js，开发前端全栈网站-10.生产环境编译
…

1.制作登录页面

Login.vue：

<template>
    <div class="login-container">
        <!-- 使用elementui中的card组件 -->
        <el-card header="管理员登录" class="login-card">
            <!-- 监听表单的submit事件，native.prevent监听原生表单事件跳转接口并且阻止页面跳转 -->
            <el-form @submit.native.prevent="login">
                <el-form-item label="用户名">
                    <el-input v-model="model.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="model.password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" native-type="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            model: {}
        }
    },
    methods: {
        async login() {
            const res = await this.$http.post('login')
            console.log(res)
        }
    }
}
</script>

<style>
.login-card{
    width: 35rem;
    margin: 6rem auto;
}
</style>

在routes/index.js引入Login.vue组件并创建login路由：

进入login登陆页面：

2.登录接口和密码验证

（1）定义密码验证的方法

// 验证密码
// 传入字符串格式的两个密码，一个是数据库获取到的已加密密码，一个是需要进行验证的登录密码。输出一个bool值结果
func comparePsw(pswHashed string, pswLogin string) bool {
	// 将需要比对的密码放入byte格式数组中转码
	byteHashed := []byte(pswHashed)
	byteLogin := []byte(pswLogin)
	// 通过bcrypt内部自带的比对方法比对两个密码是否对应
	err := bcrypt.CompareHashAndPassword(byteHashed, byteLogin)
	// 如果验证错误
	if err != nil {
		return false
	}
	// 如果验证成功
	return true
}

（2）定义登录接口方法

// 登录的接口方法
func login(ctx *gin.Context) {
	// 1.连接数据库
	url := "mongodb://127.0.0.1"
	session, err := mgo.Dial(url)
	if err != nil { 
		panic(err) 
	}
	defer session.Close()

	session.SetMode(mgo.Monotonic, true)
	c := session.DB("db_go").C("admin")

	// 2.获取传入数据
	// 用admin模型定义form
	var form models.Admin
	// 合并传入数据到form，如果传值格式不符合上方定义的结构，则返回错误信息
	if err := ctx.Bind(&form); err != nil {
		ctx.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
		return
	}

	// 3.根据用户名找用户
	// 如果传值没有username
	if form.Username == "" {
		ctx.JSON(422, gin.H{"message": "请输入用户名"})
		return
	}
	// 查询username是否存在
	type modelName models.Admin
	modelNamer := modelName{}
	err = c.Find(bson.M{"username": form.Username}).One(&modelNamer)
	if err != nil {
		if err.Error() == "not found" {
			ctx.JSON(422, gin.H{"message": "没有该用户"})
			return
		}else{
			ctx.JSON(422, gin.H{"message": "请检查您的网络"})
			return
		}
	}

	// 4.校验密码
	// 如果没有输入密码
	if form.Password == "" {
		ctx.JSON(422, gin.H{"message": "请输入密码"})
		return
	}
	// 根据密码校验方法进行校验密码，传入数据库查询到的加密密码和前端传来的用户登录密码
	compare := comparePsw(modelNamer.Password, form.Password)
	if compare == false {
		ctx.JSON(422, gin.H{"message": "密码错误"})
		return
	}else{
		ctx.JSON(200, gin.H{"message": "登录成功"})
		return
	}

}

（3）定义登录路由和路由地址
后端接口地址应为http://localhost:3000/admin/api/login：

编译启动，测试：

3.全局监听响应的拦截，将错误时发送的message在页面显示

admin/src/http.js:

// 全局进行响应的拦截(axios内的响应拦截方法)
http.interceptors.response.use(res => {
    return res
},err => {
    // 如果拦截到错误的操作,使用VUE将错误信息进行弹出展示
    // 获取错误信息console.log(err.response.data.message)
    Vue.prototype.$message({
        type: 'error',
        message: err.response.data.message
    })
    return Promise.reject(err)
})

保存再次进行测试：

到此，用户登录功能已经基本实现，但目前还缺少登录的一个重要功能：token验证。所以向上面登录还是半成品，没什么作用。下篇文章针对登录的token验证进行完善登录。

更多设计、功能的学习经验，大家也可以去我的公众号查看！

————