首先，下面先介绍一下Vue和Element-plus的基本概念。
Vue是一个用于构建用户界面的渐进式框架，它允许你从简单的方式开始而逐渐地增加复杂性，它使用声明式的模板语法让你将界面抽象为一个组件树，且每个组件都可以拥有自己的状态和行为。
Element-plus则是Vue组件库中较为流行的一个组件库，它提供了大量的可复用的UI组件，可以帮助你更好地构建用户界面。
1. 创建Vue项目
首先我们需要在本地安装Vue-cli，这个可以通过npm包管理器来完成，命令如下：
npm install -g vue-cliVue-cli可以帮助我们快速创建Vue项目，我们可以通过下面的命令来创建一个新的Vue项目：
vue create my-project1.1 创建登录和注册页面
我们需要创建两个页面，一个是登录页面，另一个是注册页面。我们可以在src文件夹下创建两个新的Vue组件，命名为Login.vue和Register.vue。
下面是Login.vue文件的内容：
<template>
<div>
<h2>登录</h2>
<el-form :model="form" ref="form" :rules="rules" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">登录</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
//login logic
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
上面的代码中，我们利用Element-plus中的Form组件，实现了一个简单的登录表单，其中form数据对象中包含了用户名和密码这两个数据项。submitForm和resetForm分别是提交表单和重置表单的函数。
下面是Register.vue文件的内容：
<template>
<div>
<h2>注册</h2>
<el-form :model="form" ref="form" :rules="rules" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="form.confirmPassword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">注册</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: '',
confirmPassword: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: this.checkPassword, trigger: 'blur' }
]
}
};
},
methods: {
checkPassword(rule, value, callback) {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
//register logic
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
2. 实现路由功能
接下来，我们需要使用Vue路由来实现页面的跳转功能。在src目录下创建router.js文件，并添加下面的代码：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/components/Login';
import Register from '@/components/Register';
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{ path: '/', component: Login },
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
});
在上面的代码中，我们首先引入了Vue和VueRouter，并注册了VueRouter插件。然后，我们在路由中设置了三个路径：'/'、'/login'和'/register'，分别对应着首页、登录页和注册页。当页面打开时，会默认跳转到登录页。
接下来我们需要在App.vue中引入路由组件，并设置路由出口。在App.vue文件中添加下面的代码：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
3. 实现登录和注册逻辑
3.1 登录逻辑
我们首先需要在后端构建好登录功能，使用axios发送POST请求并提交表单中的用户名和密码数据。如果登录成功，我们就需要将token存储到浏览器的localStorage中。
import axios from 'axios';
export function login(username, password) {
return axios({
method: 'post',
url: '/api/auth/login/',
data: {
username: username,
password: password
}
}).then(response => {
localStorage.setItem('token', response.data.token);
return response.data.user;
});
}
在登录成功后，我们需要将用户信息存储到Vuex中，方便当前页面和其他页面调用。
import Vuex from 'vuex';
import Vue from 'vue';
import { login } from '@/api/auth';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: null
},
mutations: {
setUser(state, user) {
state.user = user;
}
},
actions: {
login({ commit }, { username, password }) {
return login(username, password).then(user => {
commit('setUser', user);
});
}
}
});
3.2 注册逻辑
注册和登录逻辑类似，我们也需要在后端构建好注册功能，使用axios发送POST请求并提交表单中的用户名和密码数据。
当注册成功后，我们需要使用Element-plus中的MessageBox组件来提示用户注册成功，并且自动跳转到登录页。
import axios from 'axios';
import { MessageBox } from 'element-plus';
import router from '@/router';
export function register(username, password) {
return axios({
method: 'post',
url: '/api/auth/register/',
data: {
username: username,
password: password
}
}).then(() => {
MessageBox.alert('注册成功！', '提示', {
confirmButtonText: '确定',
callback: () => {
router.push({ path: '/login' });
}
});
});
}
4. 配置拦截器和Token验证
最后，我们需要添加一个拦截器，用来在每个请求中加上token，保障请求的安全性，并且如果token失效需要跳转到登录页面。
我们在main.js文件中添加下面的代码：
import axios from 'axios';
import router from './router';
axios.defaults.baseURL = 'http://localhost:8000';
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Token ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response && error.response.status === 401) {
// token失效处理
router.push({ path: '/login' });
}
return Promise.reject(error);
}
);
在上面的代码中，我们使用axios的interceptors实现了拦截器功能，如果有token，就会在请求头中加上Authorization字段，如果没有token或者token失效，就会自动跳转到登录页面。
5. 总结
通过以上的步骤，我们成功地实现了Vue和Element-plus的用户登录和注册功能。
首先我们创建了两个组件：Login和Register，分别对应着登录和注册页面。然后，通过Vue-router实现了页面的跳转功能。接下来，我们编写了登录和注册的逻辑，并且添加了拦截器和Token验证，保障了用户的安全性。
在日常的开发中，我们可以按照以上步骤来实现需要的功能，使用Element-plus组件库可以大大减轻我们的开发难度，增强用户体验。