技能学习:学习使用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验证进行完善登录。
更多设计、功能的学习经验,大家也可以去我的公众号查看!
————