1.获取登录所需要的用户名和密码信息
所以采用v-model对用户名和密码进行双向绑定。即可获取用户输入的内容,保存在loginData中，再进行验证时和自定义的userMsg验证即可。
为了简便操作，这里的用户信息没有通过后台获取，只是在这里简单的自定义了一个用户对象。即使在与后台交互时，也是相差无几的。
<Input type="text" v-model="loginData.user" placeholder="用户名">
<Input type="password" v-model="loginData.password" placeholder="密码">
//密码信息
return {
loginData: {
user: '',
password: '',
switch: false
},
//默认用户密码
userMsg: {
user: 'admin',
password: '123456'
}
}
}
2. 登录操作
实现登录便是点击登录按钮,@click="handleSubmit(loginData)用v-on绑定了handleSubmit事件,执行登录验证以及页面跳转操作。
<Button type="primary" long size="large" @click="handleSubmit(loginData)">
登录
</Button>`
handleSubmit(data) {
/******登录验证等省略******/
this.$router.push({path: '/main'}); //路由跳转
}
//实现路由的跳转还需要在我们的router文件中，配置路由的路径和相应的组件名：
routes: [
{
path: '/',
name: 'login',
component: login
},
{
path:'/main',
name:'main',
component:main
}
]
- 结合localStorage的记住密码
localStorage的简单使用方法:https://blog.csdn.net/mjzhang1993/article/details/70820868
<span slot="label" v-bind:class="{remember:loginData.switch}">记住密码?</span>
<i-switch v-model="loginData.switch">
<span slot="open">On</span>
<span slot="close">Off</span>
</i-switch>
handleSubmit(data) {
//判断用户名密码是否正确
if (this.loginData.user == this.userMsg.user && this.loginData.password == this.userMsg.password) {
if (this.loginData.switch == true) { //记住密码
localStorage.setItem('user', JSON.stringify(this.loginData));
}
else{
localStorage.removeItem('user');
}
console.log(this.loginData);
this.$store.commit('changeLoginStatus', this.loginData.user);
this.$router.push({path: '/main'});
}
else {
this.$Message.error('账号或密码输入错误！');
}
}
这里的原理其实也非常容易理解。对于这个switch的的按钮，只负责数据的绑定。主要还是在于点击登录按钮时所执行的操作。通过switch的状态，根据不同情况处理数据。
- 当我们选择记住密码后，如果密码输入正确，我们向localstorage传递我们的用户信息这个对象，保存当前用户的账号和密码，以及密码保存的状态。
- 如果没有选择保存密码，则从localstorage中移除当前登录信息
- 因为相关里的用户信息直接与两个输入框双向绑定，所以从localstorage中获取的值直接给输入框绑定的数据，无需再重新赋值
4.登录状态管理
在代码的处理中，子组件想要获得父组件的数据，我们可以用到prop，当父组件想要获得子组件的数据是，我们可以用到$emit那么兄弟组件之间、甚至是没啥关系的组件想要获得其他组件的信息时，应当怎么处理呢？
对于状态管理的学习，我是把其当做我们程序中的全局变量去理解，他是我们所有组件都能共享的内容。详情用法可查看官网vuex
- 代码的放置位置
我们可以放在main.js中(不建议这么做），为了方便代码的管理，可以新建另外的文件夹以方vuex的代码。但因为这次代码量比较少，我就偷懒放在了main.js中了
let store = new Vuex.Store({
state:{
loginStatus:'登录'
},
mutations:{
changeLoginStatus(state,name){
state.loginStatus=name;
}
}
})
store中的数据的是不能直接在组件中修改的，必须得通过vuex中的mutation去执行修改操作。
当点击登录按钮后，执行下面行代码，就会到我们的vuex中的代码中去执行。
this.$store.commit('changeLoginStatus', this.loginData.user);
