前端新用户注册，登录，退出登录功能实现

目录

新用户注册功能

用户登录功能

用户退出登录功能

---

新用户注册功能

基本思路：

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

使用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 } = userInfo
    const { password } = userInfo
    let result = await reqLogin({
      username: Base64.encode(username),  //将用户名和密码加密处理
      password: Base64.encode(password)
    });
    if (result.code == 0) {
      commit("RWQLOGIN", result.data.token);
      //持久化存储token
      setToken(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);
  };
  //获取token
  export const getToken = () => {
    return localStorage.getItem("TOKEN");
  };
  
  //清除本地存储的token
  export 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();
  }