项目外包 网站开发,代理公司注册品牌,主机做网站,海外高延迟服务器做网站vue项目登录页面实现记住用户名和密码
记录一下实现的逻辑#xff0c;应该分两步来理解这个逻辑 首次登录#xff0c;页面没有用户的登录信息#xff0c;实现逻辑如下#xff1a; 用户输入用户名和密码登录#xff0c;用户信息为名为form的响应式对象#xff0c;v-model…vue项目登录页面实现记住用户名和密码
记录一下实现的逻辑应该分两步来理解这个逻辑 首次登录页面没有用户的登录信息实现逻辑如下 用户输入用户名和密码登录用户信息为名为form的响应式对象v-model分别对应两个输入框用户点击登录实现登录功能判断是否勾选了记住密码v-model一个CheckBox勾选为true不勾选为false默认false 若勾选记住密码则在浏览器的localstorage中写入一个名为loginInfo的对象值为字符串后的form若没有勾选同样在localstorage中写入一个名为loginInfo的对象值为空 下次再登录就会根据上一次的勾选状态来判断是否填充form输入框逻辑如下 挂载页面时判断localstorage中是否有需要的对象 如果有就把rememberMe的值设为true并向页面的输入框填充用户名和米面如果没有就把rememberMe的值设为false 因为逻辑比较简单就不再画图了
放一下相关的代码
templatediv classloginel-form refformRef :modelform :rulesrules classlogin-formh3 classtitle登录/h3el-form-item propusernameel-input v-modelform.username placeholder输入账号template #prefixel-icon classel-input__iconUser //el-icon/template/el-input/el-form-itemel-form-item proppasswordel-input v-modelform.password placeholder输入密码 typepassword show-passwordkeyup.enter.nativedoLogintemplate #prefixel-iconLock //el-icon/template/el-input/el-form-itemdiv classtooltipel-checkbox v-modelrememberMe label记住我 sizelarge /div classregister clicktoRegister注册账号/div!-- a href#忘记密码/a --/divel-form-itemel-button stylewidth: 100% clickdoLogin classinput登录/el-button/el-form-itemdiv classsepdiv stylemargin-top: -11pxlabel联系我们/label/div/div/el-form/div
/templatescript setup
import { reactive, ref, onMounted } from vue
import { useUserStore } from /stores/user;
import { useRouter } from vue-router
import { ElMessage } from element-plus;
const userStore useUserStore()
const router useRouter()
import http from /utils/http
// import axios from axiosconst rememberMe ref(false)
const formRef ref(null)
const form ref({username: ,password:
})const rules {username: [{ required: true, message: 用户名不能为空, trigger: blur },{ min: 2, max: 30, message: 长度在 2 到 30 个字符, trigger: blur }],password: [{ required: true, message: 密码不能为空, trigger: blur },{ min: 3, max: 30, message: 长度在 6 到 30 个字符, trigger: blur }],
}const doLogin () {const { username, password } form.valueconst data { username, password }// console.log(data)formRef.value.validate(async valid {if (valid) {try {await userStore.getUserInfo(data)// console.log(sdfdssff, userStore.userInfo)if (userStore.userInfo.Authorization) {if(rememberMe.value){localStorage.setItem(loginInfo, JSON.stringify(form.value))} else {localStorage.setItem(loginInfo, JSON.stringify({}))}router.push(/)}} catch (error) {ElMessage.error(用户名或密码错误)}}else { ElMessage.error(校验没通过) }})
}const toRegister () {router.push(/register)
}// 页面加载时监听是否有记住密码
onMounted(() {// console.log(Object.keys(localStorage.getItem(loginInfoTs)))if(localStorage.getItem(loginInfo) ! null Object.keys(localStorage.getItem(loginInfo)).length 2){rememberMe.value trueconst loginInfo JSON.parse(localStorage.getItem(loginInfo))form.value.username loginInfo.usernameform.value.password loginInfo.password} else {rememberMe.value false}
})
/script核心代码是doLogin方法和onMounted中的内容
