vue模拟后台登陆功能
<template>
<div class="login">
<form class="container" @submit.prevent="login">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
placeholder="Email"
v-model="user.emial"
>
</div>
<div class="form-group">
<label for="exampleInputEmail1">password</label>
<input
type="text"
class="form-control"
id="exampleInputEmail1"
placeholder="password"
v-model="user.password"
>
</div>
<input type="submit" class="btn btn-primary btn-lg btn-block" value="登陆">
</form>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "login",
data() {
return {
user: {}
};
},
methods: {
login() {
axios.get("/api/user.json").then(data => {
console.log(data);
let users = [];
for (let key in data.data) {
users.push(data.data[key]);
}
let isUser = users.filter(item => {
return (
item.emial == this.user.emial && item.password == this.user.password
);
});
console.log(isUser);
if (isUser != null && isUser.length > 0) {
this.$router.push("/");
} else {
alert("当前用户不存在");
}
});
}
}
};
</script>
利用vuex进行存储数据实现登陆后显示个人信息功能
1、在vuex(store.js)中创建数据状态
state:
isLogin: false, //用来显示是否登陆
currentuser: null //用来显示用户信息是否显示
getter:
getIsLogin: state => state.isLogin,
getCurrentuser: state => state.currentuser
2、在header组件中展示是否显示用户信息
<li><router-link to="/login" v-show="isLogin">{{current}}</router-link></li>
<li><router-link to="/" v-show="isLogin">[退出]</router-link></li>
<li><router-link to="/login" v-show="!isLogin">登陆</router-link></li>
<li class="dropdown" v-show="!isLogin">
<router-link to="/sign" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">注册</router-link>
</li>
3、在header组件中获取当前数据的显示状态
computed: {
isLogin: function() {
return this.$store.getters.getIsLogin;
},
current: function() {
return this.$store.getters.getCurrentuser;
}
}
4、在login组件中 登陆跳转页面之前需要我们进行存储当前的用户信息(这次存储在action中 在应用mutations的方法 也可以直接存在mutations中进行数据的操作)
注释:mutations 是更改数据状态，在组件中调用需要用 commit('函数名',data) data传过去的数据
action 是应用mutations，需要用dispatch进行传递数据 dispatch('函数名',数据)
if (isUser != null && isUser.length > 0) {
this.$store.dispatch("setUser", isUser[0].email);
this.$router.push("/");
} else {
this.$store.dispatch("setUser", null);
alert("当前用户不存在");
}
5、在store中进行逻辑判断
actions: { //应用mutations
setUser({ commit }, user) {
commit("userSatus", user)
}
}
mutations: { //用来更改数据状态
//更改用户的状态信息 如果用户信息没有则保存，如果有则进行清空
userSatus(state, user) {
if (user) {
state.currentuser = user;
state.isLogin = true
} else {
state.currentuser = null;
state.isLogin = false
}
}
}
6、成功啦！成功之后设置退出的功能，退出后用户信息的null掉，用到了组建内路由守卫
<li><router-link to="/login" v-show="isLogin">[退出]</router-link></li> //header中退出调转到登录页面
登录页面中进行路由守卫，推出后进行清空用户信息
beforeRouteEnter(to, from, next) {
// ...
next(vm => {
vm.$store.dispatch("setUser", null);
});
},