登录（Vue3+ts+vuex+router）

登录流程

1.根据验证rules判断表单是否通过验证，通过之后才能进行下一步

2.获取输入框的值进行密码加密使用的sh256

3.进行三次密码错误显示验证码

4.进行验证码校验之后进行登录

5.登录成功之后保存token，判断用户是否选中记住密码，保存之后相关会用到的信息

6.在进入页面的时候就进行用户账号密码的回显

<template>
    <div class="g-contanier">
        <div class="g-content">
            <h2>登录</h2>
            <el-form :model="account" :rules="rules" ref="ruleFormRef">
                <el-form-item prop="username">
                    <el-input placeholder="请输入账号" v-model.trim="account.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        placeholder="请输入密码"
                        v-model.trim="account.password"
                        type="password"
                    ></el-input>
                </el-form-item>

                <!-- 三次显示验证码 -->
                <!-- 验证码 -->
                <el-form-item prop="verifyCode" v-if="num >= 3">
                    <el-input v-model="account.verifyCode" placeholder="输入验证码">
                        <template #suffix>
                            <span v-html="verityfiycode.data" @click="getVerifyCode"></span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="remenberPsw">
                    <el-checkbox
                        v-model="account.remenberPsw"
                        label="记住密码？"
                        size="large"
                    ></el-checkbox>
                </el-form-item>

                <el-button @click="bindlogin">登录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const ruleFormRef = ref(null)

//需要下载js-sha56 然后进行导入使用
import sha256 from 'js-sha256'

//从element-plus导入提示信息
import { ElMessage } from 'element-plus'

//路由的api导入
import { RequestLogin, RequestVerifyCode } from '../api/path/index.js'

// 使用路由也需要手动导入路由
import { useRouter } from 'vue-router'

// 在Vue3中使用vuex需要导入vuex然后使用
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

// 三次出错显示验证码，次数计算
const num = ref(0)
// 图片验证码
const verityfiycode = ref({
    code: '',
    data: '',
})

// 定义表单数据
const account = ref({
    username: '',
    password: '',
    verifyCode: '', //验证码
    remenberPsw: false,
})
// 校验规则
const rules = ref({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
// 点击登录需要校验查看框子里面是不是输入的
const bindlogin = () => {
    // 1.判断用户是否正确输入了用户编码和密码
    // 这里 ruleFormRef?.value?.validate表示的是是否所有的rules校验规则都通过了，都通过了还会是true
    ruleFormRef?.value?.validate(valid => {
        // console.log("valid", valid) //true
        if (valid) {
            // 如果是三次之前的话直接进行账号密码验证
            if (!checkvertifyCode()) {
                getlogin()
            } else {
                // 如果是三次出错之后的话要先进行验证码的验证然后账号密码验证
                if (onvertifycode()) {
                    getlogin()
                } else {
                    getVerifyCode()
                    ElMessage.error('验证码出错')
                }
            }
        }
    })
}
// 登录业务实现
const getlogin = async () => {
    const password = sha256(account.value.password)
    const checked = account.value.remenberPsw
    const data = await RequestLogin(account.value.username, password)
    console.log(data)
    const { resultCode, resultInfo, token } = data
    if (resultCode === 1) {
        // 保存token
        localStorage.setItem('TOKEN', token)
        // 保存一些所需要用到用户的信息
        store.dispatch('user/keep', {
            username: resultInfo.nick,
            headerimg: resultInfo.headerimg,
        })
        // 是否记住密码
        if (checked) {
            localStorage.setItem(
                'user_Info',
                JSON.stringify({
                    user: account.value.username,
                    psd: account.value.password,
                })
            )
        }
        //跳转界面
        router.push('/home')
        // 弹出提示
        ElMessage('登录成功')
    } else {
        num.value++
        ElMessage('账户或者密码出错')
    }
}
// 生命周期挂载的时候获取用户数据
onMounted(() => {
    // 记住密码，显示用户信息
    getUserMessage()
    // 调取验证码
    getVerifyCode()
})
/**
 * 根据用户是否选择记住密码来判断用户在下一次进入的时候是否显示用户信息
 */
const getUserMessage = () => {
    const user = JSON.parse(localStorage.getItem('user_Info'))
    if (user) {
        account.value.remenberPsw = true
        account.value.username = user.user
        account.value.password = user.psd
    }
}
// 获取验证码
const getVerifyCode = async () => {
    const data = await RequestVerifyCode()
    const { resultCode, resultInfo } = data
    if (resultCode === 1) {
        // 获取验证码base64编码以及正确信息
        verityfiycode.value = resultInfo
    }
}
// 验证码出错次数
const checkvertifyCode = () => {
    if (num.value >= 3) {
        return true
    }
    return false
}
// 校验验证码
const onvertifycode = () => {
    // 判断我输入的验证码是否和得到的正确验证码是否一样
    if (account.value.verifyCode === verityfiycode.value.code) {
        return true
    } else {
        return false
    }
}
</script>

<style scoped lang="scss">
.g-contanier {
    width: 100%;
    height: 100vh;
    background-color: rgba(51, 68, 75, 0.389);
    position: fixed;
    top: 0;
    left: 0;
    .g-content {
        width: 400px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        h2 {
            text-align: center;
            color: white;
        }
        .el-form {
            background-color: white;
            border-radius: 8px;
            padding: 30px 30px;
            .el-button {
                width: 100%;
            }
        }
    }
}
</style>