vue3 账号登录验证

<template>
    <div class="login-content">
 <a-form :model="formState" layout="vertical" name="basic" @finish="onFinish"
                            @finishFailed="onFinishFailed" autoComplete="off">
                            <div class="login-username">
                                <img src="../../assets/img/login-user.png" alt="">
                                <span class="account-number">账号</span>
                            </div>
                            <div class="login-user">
                                <a-form-item name="username" :rules="[{ required: true, message: '请输入账号!' }]">
                                    <a-input class="user-input" :bordered="false" v-model:value="formState.username">
                                    </a-input>
                                </a-form-item>
                            </div>
                            <div class="login-username login-password">
                                <img src="../../assets/img/login-password.png" alt="">
                                <span class="account-number">密码</span>
                            </div>
                            <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
                                <a-input class="user-input password" :bordered="false" v-model:value="formState.password"
                                    type="password">
                                </a-input>
                            </a-form-item>
                            <div class="check login-remember">
                                <a-checkbox v-model:checked="isRemember" style="color: #fff;">记住密码</a-checkbox>
                            </div>
                            <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
                                <a-button class="login-btn" html-type="submit">登录</a-button>
                            </a-form-item>
                        </a-form>
    </div>
</template>
<script setup>

import website from "@/config/website"
import { getUUID } from '@/utils/util'
import { setToken, getToken } from "@/utils/auth"
import { useRouter } from "vue-router";
import { message } from 'ant-design-vue';
import { login } from '@/api/login';
import { reactive, ref, onUnmounted, onMounted } from 'vue';
import moment from 'moment'
import Cookies from 'js-cookie'
import { useStore } from 'vuex'
const store = useStore()
const formState = reactive({
    username: '',
    password: '',
    captcha: '',
    uuid: '',
});
const week=ref('')
const date = ref('')
const time = ref('')
const state = reactive({
    timeFun: ''
})
onMounted(() => {
    state.timeFun = setInterval(() => {
        date.value = moment(new Date()).format("YYYY-MM-DD")
        time.value = moment(new Date()).format("HH:mm:ss")

    }, 1000)


let dt = new Date();     
let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
week.value=weekDay[dt.getDay()]
})

// 记住密码
const isRemember = ref(false)
const router = useRouter();
setForm();

// 判断有无记住密码
function setForm() {
    let rememberPassword = localStorage.getItem("rememberPassword")
    if (rememberPassword) {
        isRemember.value = Boolean(rememberPassword)
        let id = localStorage.getItem("loginId") || ''
        if (id.length === 0) return;
        id = window.atob(id);//解码
        let user = id.match(/.*(?=-)/)[0]
        let psw = id.match(/(?<=-).*/)[0];
        formState.username = user
        formState.password = psw
    }
}


onUnmounted(() => {
    clearInterval(state.timeFun);
})


// 登录验证成功
const onFinish = values => {
 //前端-传参安全处理window.btoa base64加密，线性对称加密
 
    formState.password = window.btoa(formState.password)
    login(formState).then((res) => {
        if (res.data.code === 0) {
            if (res.data.msg === 'success') {
                 //使用localStorage实现记住密码的操作
                localStorage.setItem("rememberPassword", isRemember.value)
                if (isRemember.value === true) {
                    let loginId = formState.username + '-' + window.atob(formState.password)//用于解码使用 base-64 编码的字符串
                    loginId = window.btoa(loginId);//编码
//loginId是账号-密码 的加密字符串
                    localStorage.setItem("loginId", loginId)
                } else {
                    localStorage.clear()
                }
                let userExten = ""
                if (res.data.data.leftexten.indexOf('@') > -1) {
                    userExten = res.data.data.leftexten.split('@')[0]
                } else {
                    userExten = res.data.data.leftexten
                }
                let loginData = {
                    leftexten: userExten,
                    lpd: res.data.data.lpd,
                    sip_phone: res.data.data.sip_phone,
                    sys_user_id: res.data.data.sys_user_id,
                }
                let login = {
                    username: formState.username,
                    password: window.atob(formState.password)
                }
                Cookies.set("loginData", JSON.stringify(loginData))
                Cookies.set("login", JSON.stringify(login))
                Cookies.set("userExten", userExten)
                Cookies.set("token", res.data.data.token)
                Cookies.set("systemToken", res.data.data.token)
                Cookies.set("taskId", res.data.data.taskId)
                Cookies.set("isConnectThirdSystem", res.data.data.isConnectThirdSystem)
                Cookies.set("tokenYuneasySystem", res.data.data.tokenYuneasySystem)
                router.push({ path: "/" })
            }

        } else {
            message.error(res.data.msg)
            formState.password = window.atob(formState.password)
        }
    })
};
// 验证失败
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};


   
             
</script>

localstorage和cookie区别：