vue实现前端登录三权分立代码
时间: 2024-01-05 08:12:33 浏览: 23
三权分立指的是将前端的展示、业务逻辑、数据存储分别独立开来,保证各自的责任清晰。在前端登录中,可以将三权分立分为以下部分:
1. 展示层:负责用户界面的展示和交互,如用户输入账号密码、点击登录按钮等。
2. 业务逻辑层:负责处理用户输入的数据,对数据进行校验和处理,并将数据传递给后端进行验证,如检查用户名和密码是否为空、加密密码等。
3. 数据存储层:负责将用户信息存储在本地或服务器中,如将用户信息存储在浏览器的 localStorage 中或发送请求将用户信息存储在服务器端。
下面是一个简单的 Vue 代码示例,实现了前端登录三权分立:
```html
<template>
<div>
<form>
<input type="text" v-model="username" placeholder="请输入用户名">
<input type="password" v-model="password" placeholder="请输入密码">
<button type="button" @click="login">登录</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
if (!this.validateForm()) {
return false;
}
const data = {
username: this.username,
password: this.encryptPassword(this.password)
};
this.$http.post('/api/login', data).then((response) => {
if (response.status === 200 && response.data.code === 0) {
localStorage.setItem('token', response.data.token);
this.$router.push('/');
} else {
alert(response.data.msg);
}
}).catch((error) => {
console.log(error);
});
},
validateForm() {
if (!this.username) {
alert('请输入用户名');
return false;
}
if (!this.password) {
alert('请输入密码');
return false;
}
return true;
},
encryptPassword(password) {
// 加密密码
return password;
}
}
}
</script>
```
在这个示例中,我们将展示层和业务逻辑层放在了一个组件中,数据存储层使用了 Vue 的插件 vue-resource 发送请求到后端进行验证。其中,validateForm() 方法用于校验用户输入的数据,encryptPassword() 方法用于加密用户输入的密码。当用户点击登录按钮时,会调用 login() 方法,该方法首先调用 validateForm() 方法校验数据,然后将数据传递给后端进行验证,如果验证通过则将用户信息存储在本地的 localStorage 中,并跳转到首页。如果验证不通过,则弹出提示框告知用户。