vue实现登录,记住密码功能(cookie)
Posted ur home
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现登录,记住密码功能(cookie)相关的知识,希望对你有一定的参考价值。
1. auth工具类
import Cookies from 'js-cookie'
export function getCookie(key: string) {
return Cookies.get(key)
}
export function setCookie(key: string, value: string, expires: number) {
return Cookies.set(key, value, { expires: expires })
}
export function removeCookie(key: string) {
return Cookies.remove(key)
}
3. types.d.ts
export interface ILoginDTO {
username: string;
password: string;
code: string;
}
4. index.vue
<template>
<div class="bg-white login">
<div class="w1000 margin-auto pt-100">
<div class="flex flex-space-between pt-50">
<div class="pt-70">
<img src="../../assets/images/login/login_img.png" />
</div>
<div class="w420-h465">
<p class="pt-50 fs-24 fc-3F4042 text-align">用户账号登录</p>
<el-form ref="formRef" :rules="formRules" :model="formModel" class="login-form pt40-r50-b0-l50">
<el-form-item label="" prop="username">
<el-input v-model.trim="formModel.username" size="large" placeholder="请输入用户名" maxlength="20">
<svg-icon slot="prefix" width="17" height="19" name="loginNameIcon"></svg-icon>
</el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input type="password" v-model.trim="formModel.password" size="large" placeholder="请输入密码" maxlength="20" :show-password="true">
<svg-icon slot="prefix" width="17" height="20" name="loginPwdIcon"></svg-icon>
</el-input>
</el-form-item>
<el-form-item label="" prop="code" class="login-code">
<el-input v-model.trim="formModel.code" size="large" placeholder="请输入验证码" maxlength="4">
<svg-icon slot="prefix" width="17" height="20" name="loginCodeIcon"></svg-icon>
</el-input>
</el-form-item>
<el-checkbox v-model="rememberMe" class="pb-20">记住密码</el-checkbox>
</el-form>
<div class="login-submit pl-50 pr-50">
<el-button @click="submit" type="success">立即登录</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import { getCookie, setCookie, removeCookie } from "@/utils/auth";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { ILoginDTO } from "@/api/auth/types";
@Component({
name: 'login'
})
export default class extends Vue {
private formModel: ILoginDTO = {
username: '',
password: '',
code: '',
}
private formRules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
}
private rememberMe: boolean = false;
created() {
this.getCookieAccountInfo()
}
// 获取存储在cookie 中的 账号密码信息
private getCookieAccountInfo() {
const username = getCookie("username");
const password = getCookie("password");
const rememberMe = getCookie('rememberMe')
this.formModel = {
username: username === undefined ? this.formModel.username : username,
password: password === undefined ? this.formModel.password : decrypt(password),
code: ''
};
this.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
}
private submit() {
(this.$refs.formRef as any).validate(async(valid: boolean) => {
if (valid) {
this.isRememberMe()
} else {
return false;
}
})
}
private isRememberMe() {
if (this.rememberMe) {
setCookie("username", this.formModel.username, 30);
setCookie("password", encrypt(this.formModel.password), 30);
setCookie('rememberMe', this.rememberMe, 30);
} else {
removeCookie("username");
removeCookie("password");
removeCookie('rememberMe');
}
}
}
</script>
<style lang='less'>
.login {
.login-form {
.login-code {
.el-input {
width: 60% !important;
}
}
.el-form-item__content {
height: 45px;
line-height: 45px;
.el-input--prefix .el-input__inner {
padding-left: 43px !important;
}
.el-input__inner {
height: 45px;
line-height: 45px;
}
.el-input__prefix {
display: flex;
align-items: center;
left: 15px !important;
}
}
}
.login-submit {
.el-button {
width: 100%;
height: 50px;
font-size: 24px;
}
.el-button--success {
background-color: #00B4A5;
border-color: #00B4A5;
}
}
}
</style>
以上是关于vue实现登录,记住密码功能(cookie)的主要内容,如果未能解决你的问题,请参考以下文章