<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区别: