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

技能学习：学习使用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验证。

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

————