vue实现登录,记住密码功能(cookie)
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)
}
jsencrypt 工具类
types.d.ts
export interface ILoginDTO {
username: string;
password: string;
code: string;
}index.vue
<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>
还没有评论,来说两句吧...