loginform登录表单 vs_From表单实现登录

话不多说，直接上代码

后台管理系统

记住密码

登录

{{message}}

import Sha256 from "js-sha256"; // 对密码进行加密的组件

import { RequestLogin } from "@/api/IndexApi.js";

import { SetToken } from "@/common/tokenCookie.js";

import {

savePswToCookie,

clearPswFromCookie,

getPswFromCookie

} from "@/common/cookiePsw.js";

export default {

name: "Login",

data: function() {

return {

user: {

username: "",

password: ""

},

checked: false,

// 设置表单校验规则

rules: {

// 这里校验的字段username要与绑定的user.username名字相同

username: [

// required设置为必填项，不能为空；message为提示信息，trigger: 'blur'表示规则在失去焦点时会触发

{ required: true, message: "请输入用户名", trigger: "blur" }

],

password: [

{ required: true, message: "请输入密码", trigger: "blur" },

{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }

]

},

message: ""

// isRed: false

};

},

created: function() {

let that = this;

document.onkeypress = function(e) {

/**

* 实现按Enter键登录

* 三目运算符

* 1. document.all 表示获得文档元素内所有 HTML 标记的集合

* 2. event 和 e 为不同浏览器上的事件对象

* 3. 每个按钮对应不得不同的数值，event.keyCode 和 e.which 获取按钮的数值

* 4. enter键对应的数值为13

*/

let keycode = document.all ? event.keyCode : e.which;

if (keycode === 13) {

that.onLogin(); // 登录方法名

return false;

}

};

},

mounted: function() {

/**

* 判断cookie中是否保存用户信息，如果是的话，把保存的信息在页面显示出来，实现记住帐号和密码的功能

*/

// 判断密码是否保存在cookie中

let isRemember = getPswFromCookie();

if (isRemember) {

this.checked = true;

this.user.username = isRemember.username;

this.user.password = isRemember.password;

} else {

return null;

}

},

methods: {

onLogin: function() {

this.$refs.ruleForm.validate(valid => {

// 判断valid的值，为true时表示校验通过

if (valid) {

const userName = this.user.username;

const psw = this.user.password;

// 对密码进行加密

const passWord = Sha256(psw);

// this.user.password = passWord;

if (this.checked == true) {

console.log("记住密码：", this.checked, "保存到cookie");

savePswToCookie(this.user);

} else if (this.checked == false) {

console.log("不记住密码：", this.checked, "清除cookie");

clearPswFromCookie();

}

// axios请求数据 方法一：

RequestLogin(userName, passWord)

.then(data => {

console.log("data>>>>>>", data);

// const data = res.data;

if (data.resultCode === 1) {

/**

* 登录成功后，去请求菜单数据，并在本地vuex储存

* 这里将请求页面数据放在页面刷新时执行

* 当登录成功时，也代表页面刷新一次，整个Vue实例都会重新实例化一次

* 所以将刷新事件写到页面渲染的入口app.vue中

* this.$store.dispatch("saveMenu");

*/

SetToken(data.token);

// 将登录请求数据成功时，将登录的信息存储到本地vuex中, data.resultInfo为服务器响应回来的user对象

const user = data.resultInfo;

this.$store.dispatch("saveUser", user);

// 登录成功后自动切换路由

this.$router.replace({ path: "/index" });

} else {

this.message = data.resultInfo;

}

})

.catch(err => {

console.log(err);

});

} else {

console.log("规则不通过！！！");

}

});

}

}

};

.login {

width: 400px;

padding: 50px;

background-color: rgba(226, 226, 226, 0.7);

border-radius: 10px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

h1 {

text-align: center;

}

p {

color: red;

}

1. 先用el-form表单组件实现布局

用户名和密码输入框，记住密码单选框，登录按钮

:rules="rules"绑定表单校验规则，

:model="user"进行表单校验时，需要绑定输入的信息数组

hide-required-asterisk=false 设置是否显示必填字段的标签旁边的红色星号

ref="ruleForm" 将按钮和表单关联起来，好进行点击事件的操作

2. v-model实现双向绑定

3. js-sha256插件实现密码加密

4. 实现登录

1) 判断valid的值，为true时表示校验通过，获取用户名和加密后的密码

2)判断记住密码的单选框是否勾选，勾选状态就将帐号和未加密的密码和勾选状态true保存到cookie中,checked表示勾选状态

3)请求登录的接口

4) 请求登录接口成功后，获取token，将token储存到cookie中，获取用户信息，将用户信息储存到vuex中

5)跳转到index主页面

5. 当vue实例创建完成后，在created钩子函数中去实现enter登录

6. 当页面刚挂载完成时，在mounted钩子函数中去判断帐号和密码和勾选状态是否存在cookie中，是的话获取用户和密码和勾选状态，显示在页面上，实现记住密码功能

在登录页面遇到的问题以及解决方案:

问题：当我在登录成功后会去去请求菜单数据，并在本地vuex储存，但是在页面刷新的时候，页面数据也会丢失，造成这样的原因是，当页面刷新的时候，整个vue实例也会重新实例化一次，vuex也会重新创建

解决： 所有可以将刷新 页面的代码放在app.vue，vue实例刚被创建后以后，在这里去执行vuex的方法，在触发vuex中的方法后，去调用接口请求数据