目录

新用户注册功能

用户登录功能

用户退出登录功能

---

新用户注册功能

基本思路：

将用户的信息通过接口存入数据库，接口会返回是否存入成功

使用elementui做表单验证

代码如下：

<template><div class="register"><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="用户权限" prop="Auth"><el-input type="password" v-model="ruleForm.Auth"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-input type="password" v-model="ruleForm.confirmPassword" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</template>
<script>
import { register } from '../../api'
export default {data() {var checkName = (rule, value, callback) => {if (!value) {return callback(new Error('用户名不能为空'));} else {callback();}};var Auth = (rule, value, callback) => {if (!value) {return callback(new Error('权限不能为空'));} else {callback();}};var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.confirmPassword !== '') {this.$refs.ruleForm.validateField('confirmPassword');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.password) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm: {password: '',confirmPassword: '',username: '',Auth: ''},rules: {username: [{ validator: checkName, trigger: 'blur' }],Auth: [{ validator: Auth, trigger: 'blur'}],password: [{ validator: validatePass, trigger: 'blur' }],confirmPassword: [{ validator: validatePass2, trigger: 'blur' }],}};},methods: {submitForm(formName) {this.$refs[formName].validate(async (valid) => {if (valid) {register(this.ruleForm)} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
}
</script>
<style>
.register {height: 300px;width: 400px;
}
</style>

用户登录功能

基本思路：

将用户的登录信息传入接口，接口会返回一个用户的token，这个token是这个用户的唯一标识，当需要获取该用户的信息时，需要将token传入接口去获取数据。

运用vuex去调用接口

组件代码：

<template><div class="login"><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</template>
<script>
export default {data() {var checkName = (rule, value, callback) => {if (!value) {return callback(new Error('用户名不能为空'));} else {callback();}};var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.confirmPassword !== '') {this.$refs.ruleForm.validateField('confirmPassword');}callback();}};return {ruleForm: {password: '',username: '',},rules: {username: [{ validator: checkName, trigger: 'blur' }],password: [{ validator: validatePass, trigger: 'blur' }],}};},mounted() {},methods: {//提交表单submitForm(formName) {this.$refs[formName].validate(async(valid) => {if (valid) {try {await this.$store.dispatch("login", this.ruleForm); //调用登录接口} catch (error) {console.log(error)}} else {console.log('error submit!!');return false;}});},//重置表单resetForm(formName) {this.$refs[formName].resetFields();},}
}
</script>
<style >
.login {height: 300px;width: 400px;
}
</style>

 基本思路：

1.由于vuex的数据存储并非持久化，当页面刷新时，数据就会丢失，所以采用localStorage本地存储将token存储起来。

2。localStorage的数据存储理论上讲是永久的，只要不主动清除就不会丢失。

组件代码：

<template><div class="login"><el-form :model="ruleForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('loginForm')">提交</el-button><el-button @click="resetForm('loginForm')">重置</el-button></el-form-item></el-form></div>
</template>
<script>
export default {data() {var checkName = (rule, value, callback) => {if (!value) {return callback(new Error('用户名不能为空'));} else {callback();}};var validatePass = (rule, value, callback) => {if (!value) {return callback(new Error('用户名不能为空'));} else {callback();}};return {ruleForm: {password: '',username: '',},rules: {username: [{ validator: checkName, trigger: 'blur' }],password: [{ validator: validatePass, trigger: 'blur' }],}};},mounted() {},methods: {//提交表单submitForm(formName) {this.$refs[formName].validate(async(valid) => {if (valid) {try {await this.$store.dispatch("login", this.ruleForm); //调用登录接口} catch (error) {console.log(error)}} else {console.log('error submit!!');return false;}});},//重置表单resetForm(formName) {this.$refs[formName].resetFields();},}
}
</script>
<style >
.login {height: 300px;width: 400px;
}
</style>

vuex代码

import { reqLogin } from "@/api";
let Base64 = require('js-base64').Base64;
import { setToken, getToken, removeToken } from "@/utils/token"
const state = {token: getToken(),
};
const mutations = {//用户登录RWQLOGIN(state, token) {state.token = token;}
};
const actions = {//用户登录async login({ commit }, userInfo) {const { username } = userInfoconst { password } = userInfolet result = await reqLogin({username: Base64.encode(username),  //将用户名和密码加密处理password: Base64.encode(password)});if (result.code == 0) {commit("RWQLOGIN", result.data.token);//持久化存储tokensetToken(result.data.token);return "ok";} else {return Promise.reject(new Error("faile"));}},
};
const getters = {};
export default {state,mutations,actions,getters,
};

localStorage的数据存取

//存储token
export const setToken = (token) => {localStorage.setItem("TOKEN", token);};//获取tokenexport const getToken = () => {return localStorage.getItem("TOKEN");};//清除本地存储的tokenexport const removeToken=()=>{localStorage.removeItem("TOKEN");}

用户退出登录功能

基本思路：

1.调接口通知服务器清除用户的token（每次用户登录时，服务器都会派发一个新的token)。

2.清除本地存储的token

组件代码：

<template><div><el-tooltip content="点击退出登录" placement="top"><el-button class="iconfont icon-diannao button" @click="loginOut"></el-button></el-tooltip></div>
</template>
<script>
export default {data() {return {}},created() {},computed: {},methods: {//退出登录async loginOut() {try{await this.$store.dispatch("loginOut")}catch (error) {console.log(error)}}},
}
</script>
<style>
.button {border: none;
}
</style>

 vuex代码

  //退出登录async loginOut({ commit }) {let result = await reqlogout()if (result.code == 0) {//清除本地存储的数据commit("CLEAR")return "ok"} else {return Promise.reject(new Error("faile"));}}

  //清除本地数据CLEAR(state) {//帮仓库中先关用户信息清空state.token = '';//本地存储数据清空removeToken();}