技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-5.用户登录，密码的bcrypt（hash）加密与验证

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-1.工具和本地环境
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-3.路由、模型与数据库操作
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-4.跨域且传输数据,并优化后端接口
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-5.用户登录，密码的加密与验证
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-7.分类的模型关联和通用CRUD接口
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片

1.用户登录

<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: {username: "",password: ""}}},methods: {async login() {const res = await this.$http.post('login', this.model)console.log(res)// 存储token值// sessionStorage是页面缓存存储，关闭页面后token值被清除，每次进入页面都需要进行账号登陆// localStorage是本地存储，关闭页面后token值不会被清除，只要不清理浏览器缓存就无需再次进行登录操作localStorage.token = res.data.token// 登录成功跳转到网站首页this.$router.push('/')// 使用vue效果在页面展示结果this.$message({type: 'success',message: '登陆成功'})}}
}
</script><style>
.login-card{width: 35rem;margin: 6rem auto;
}
</style>

引入Login.vue：

页面：

后端接口：
（1）新建登录控制器

（2）引入路由

（3）编辑登录接口函数

 public function index(){// 获取前端传值$data = request() -> param();// dump($data['username']);// 验证是否输入用户名if($data['username'] == ""){return json(['message' => '请输入用户名'], $httpCode = 422);}// 在数据库查找用户$user = Admin::where('username', $data['username'])->find();if($user){// 如果有该用户// 验证是否输入密码if($data['password'] == ""){return json(['message' => '请输入密码'], $httpCode = 422);}// 验证密码是否正确if($data['password'] === $user['password']){return json(['message' => '验证成功'], $httpCode = 200);}else{return json(['message' => '密码错误'], $httpCode = 422);}}else{// 如果没有该用户return json(['message' => '没有该用户'], $httpCode = 422);}}

（4）前端全局监听响应的拦截，将错误时发送的message在页面显示

// 全局进行响应的拦截(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)
})

测试：

到此登录功能实现。

2.密码jwt加密

（1）为什么给密码加密？
虽然密码输入的type为password，但是我们仍可看到用户的密码：

作为一名合格程序员，不光要保护用户数据安全，还要保证用户的隐私安全。用户密码同样涉及到用户隐私，很多人为了更容易记住密码，会在多个平台使用相同的密码进行用户注册和登录。
（2）为什么使用bcrypt加密？
传统加密方法最常用的为md5加密，但是md5加密是以特定算法对字符串密码进行格式化加密的操作，说直白一点，是可以根据规律进行反向解密的。
而bcrypt加密方法很好地解决了这个问题，相同的密码加密出的字符串各不相同，无法反向解密，只可进行比对验证。
（3）使用bcrypt加密
在php5.5.0之后版本中，php内部封装了bcrypt加密和解密方法，无需像go\node等后端语言一样需要下载bcrypt包进行密码的加密解密操作。
同时，php的password_hash()方法省略了salt加盐过程，每次密码的散列生成时会自动生成随机的盐值，无需我们自己设置。
一般我们使用PASSWORD_DEFAULT 算法进行密码的加密，更多详细信息大家可以去php手册https://www.runoob.com/php/php-password_hash.html了解。
修改之前的接口：
添加管理员

修改管理员信息

测试：

此时，密码加密成功。

3.bcrypt密码验证

所谓密码验证，就是指在登录时输入用户设置的密码如123456，将123456通过bcrypt特殊方法与之前加密的值做比对的过程。
同样的，php封装好了bcrypt方法password_verify($password, $hash)。
修改登录接口：

测试：

密码的验证成功。

到此，用户登录和密码隐私安全问题已解决。
下篇文章完善登录功能，加入登陆的token验证。

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

————