#### 技能學習：學習使用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驗證。