#### 技能学习：学习使用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.用户登录 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: { 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验证。