vue+elementUl实现登录记住密码功能
作者:互联网
效果
思路:
采用cookie保存账户和密码。
如果勾选了记住密码,将用户名和密码保存在cookie中,设置cookie中数据保存的时间,过期清除cookie保存的值,
每次新登录的时候,获取本地保存的cookie值。
代码解析:
<el-input>标签加show-password可以控制密码的显示和隐藏
<el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>
通过checked字段控制记住密码是否被选中,初始设为false。
<el-card shadow="never">
<el-form
ref="loginForm"
label-position="top"
:rules="rules"
:model="formLogin"
size="default"
>
<el-form-item prop="username">
<el-input type="text" v-model="formLogin.username" placeholder="用户名" clearable>
<i slot="prepend" class="fa fa-user-circle-o"></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
@keyup.enter.native="handleBindPhone"
type="password"
v-model="formLogin.password"
placeholder="密码"
show-password
clearable
>
<i slot="prepend" class="fa fa-keyboard-o"></i>
</el-input>
</el-form-item>
<el-checkbox v-model="checked" class="remeberPwd">记住密码</el-checkbox>
<el-button
size="default"
@click="handleBindPhone"
type="primary"
:loading="logining"
class="button-login"
>登录</el-button>
</el-form>
</el-card>
data:
data() {
return {
timeInterval: null,
logining: false,
// 表单校验
rules: {
username: [
{
required: true,
message: "请输入用户名",
trigger: "blur"
}
],
password: [
{
required: true,
message: "请输入密码",
trigger: "blur"
}
]
},
// 表单
formLogin: {
username: "",
password: "",
},
// 记住密码checked
checked: false
};
},
methods
mounted() {
this.account(); //获取cookie的方法
},
account() {
// if (document.cookie.length <= 0) {
console.log(this.getCookie("username"));
this.formLogin.username = this.getCookie("username");
this.formLogin.password = this.getCookie("password");
// }
},
setCookie(c_name, c_pwd, exdate) {
//账号,密码 ,过期的天数
var exdate = new Date();
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
document.cookie =
"username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
document.cookie =
"password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
},
getCookie(name) {
var arr = document.cookie.split(";");
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split("="); // ["_ga", "GA1.1.1756734561.1561034020"]
if (arr2[0].trim() == name) {
return arr2[1];
}
}
},
clearCookie() {
this.setCookie("", "", -1); //清除cookie
},
// 提交登录信息
handleBindPhone() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.logining = true;
var _this = this;
if (_this.checked == true) {
//存入cookie
_this.setCookie(
_this.formLogin.username,
_this.formLogin.password,
7
); //保存7天
} else {
_this.clearCookie();
}
// 登录
// 注意 这里的演示没有传验证码
// 具体需要传递的数据请自行修改代码
this.login({
username: this.formLogin.username,
password: this.formLogin.password
})
.then(() => {
Ajax(
{
// 获取用户信息
methods: "get",
url: "/account/info"
},
res => {
// console.log('用户信息', res)
util.cookies.set("uuid", res.data.id);
this.$store.dispatch(
"d2admin/user/set",
{
name: res.data.username
},
{ root: true }
);
}
);
})
.then(() => {
Ajax(
{
// 获取侧边栏后再进入
methods: "get",
url: "/rule/menu"
},
res => {
this.$store.commit(
"d2admin/menu/asideSet",
this.changeData(res.data)
);
this.$router.replace(this.$route.query.redirect || "/");
}
);
});
} else {
// 登录表单校验失败
this.$message.error("表单校验失败,请检查");
}
});
}
标签:username,elementUl,vue,登录,res,密码,cookie,formLogin,password 来源: https://blog.csdn.net/weixin_39089928/article/details/110231770