前言：

本节给大家讲的是美食杰项目的登录注册页的主要功能和具体样式

具体效果：

未登录：

登录成功：

代码思路

1.完成具体的样式，大部分样式是根据element ui里面的样式
2.通过v-model拿到输入框输入进去的用户名和用户密码
3.通过正则判断是否合格
4.将拿到的用户名和用户密码提交到接口
5.将登录成功的用户密码保存到本地设置成token值，token值是为了后面的登录注册验证
6.跳转前要通过路由导航守卫判断是从哪来并要到哪去
7.登陆成功则将用户的基本信息保存到vuex里面，方便后面的使用
8.判断你要去那个页面，如果没登录要去其他页面则要到登录页进行登录
9.点击重置按钮置空input框

---

相应的组件：

• all为父组件 登录和注册被引入在里面
• enroll为注册页面
• login为登录页面

具体代码：

all页面的具体代码：

<template>
  <div class="alltop">
    <!-- 利用element ui里面的标签将登录和注册页面显式在一起，利用tab切换切换两个页面默认为login -->
    <el-tabs v-model="activeName" type="card" class="all">
      <el-tab-pane label="登录" name="login">
        <Login></Login>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <enroll></enroll>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Login from "@/views/login/login.vue";
import enroll from "@/views/login/enroll.vue";
export default {
  data() {
    return {
      activeName: "login",
    };
  },
  components: {
    Login,
    enroll,
  },
};
</script>

<style lang="scss" scoped>
.alltop {
  width: 100%;
  height: 1000px;
  .all {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background: #fff;
  }
}
</style>

login页面具体代码：

<template>
  <div class="login">
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      ref="ruleFroms"
      class="demo-ruleForm"
      :rules="rules"
    >
      <el-form-item label="用户名">
        <el-input class="inp" v-model="formLabelAlign.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          class="inp"
          type="password"
          v-model="formLabelAlign.password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('ruleFroms')">提交</el-button>
        <el-button @click="reset('ruleFroms')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 登录的接口
import { login } from "@/connector/api";

export default {
  data() {
    return {
      // 默认显式左边，因为登录在左边
      labelPosition: "right",
      // 变量接收输入进来的账号和密码
      formLabelAlign: {
        username: "",
        password: "",
      },
      // 正则，判断是否正确
      rules: {
        // 用户名正则
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        // 密码正则
        password: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 点击事件，点击提交用户信息
    submit(formName) {
      //formName为from表单，通过this.$refs[formName]能拿到from表单
      // console.log(this.$refs[formName]);
      // from表单的验证登录   validate为 element ui 的form表单事件用来验证登录的
      this.$refs[formName].validate(async (valid) => {
        // console.log(valid);
        // 判断验证登录是否成功
        if (valid) {
          // 成功则将数据传给接口
          login({
            name: this.formLabelAlign.username,
            password: this.formLabelAlign.password,
          }).then((data) => {
            // console.log(data);
            // 登录成功或失败会返回一个属性code 他的值为 0和1 0是登录成功，1是登录失败
            if (data.code === 0) {
              // 成功则将token值传到本地，并跳转到首页
              localStorage.setItem("token", data.data.token);
              window.location.href = "/";
            }
            if (data.code === 1) {
              //登录失败则提示登录失败
              this.$message.error(data.mes);
            }
          });
        } else {//验证不成功则弹出提示
          this.$message.error("请按照要求输入 ");
          return false;
        }
      });
    },
    // 重置功能
    reset(formName) {

      // console.log(this.$refs[formName]);
      // resetFields为element ui的form表单事件
      // 点击让form表单清空
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 1000px;
  .demo-ruleForm {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background: #fff;
    .inp {
      width: 300px;
    }
  }
}
</style>

---

登录和注册的基本功能都一样所以没有注释

enroll页面的具体代码：

<template>
  <div class="enroll">
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      ref="ruleFroms"
      class="demo-ruleForm"
      :rules="rules"
    >
      <el-form-item label="用户名">
        <el-input class="inp" v-model="formLabelAlign.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          class="inp"
          type="password"
          v-model="formLabelAlign.password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('ruleFroms')">提交</el-button>
        <el-button @click="reset('ruleFroms')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { register } from "@/connector/api";
export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submit(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].validate(async (valid) => {
        console.log(valid);
        if (valid) {
          register({
            name: this.formLabelAlign.username,
            password: this.formLabelAlign.password,
          }).then((data) => {
            console.log(data);
            if (data.code === 0) {
              localStorage.setItem("token", data.data.token);
            }
            if (data.code === 1) {
              this.$message.error(data.mes);
            }
          });
        } else {
          this.$message.error("请按照要求输入 ");
          return false;
        }
      });
    },
    reset(formName) {
      console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.enroll {
  width: 100%;
  height: 1000px;
  .demo-ruleForm {
    width: 400px;
    height: 200px;
    margin: 0 auto;
    background: #fff;
    .inp {
      width: 300px;
    }
  }
}
</style>

---

路由相关代码：

相关引入：

路由配置：

路由守卫代码：

// 登录验证完成之后，就要进行跳转，路由导航守卫进行拦截，判断是否真的验证成功

router.beforeEach(async (to,from,next)=>{
  // console.log(to)
  // 将存储的token值拿出来
  // token为用户登录验证，后端返回的一个秘钥
  let token = localStorage.getItem('token')
  // 将token值转换成布尔值 有token值则为true 没有则为false
  let logings = !!token 
  // 拿到用户的基本信息
  let data =  await userInfo()
  // console.log(Store)
  // 将用户的基本信息传进vuex
  Store.commit('changeUserInfo',data.data)
  // console.log(data)
  // to是将要跳转到的页面，他也是一个实例 ，to.matched为路由跳转过去的基本信息，将它里面的跳转路径遍历出来
  if(to.matched.some(item=>item.meta.login)){
    // 判断是否有token值
    if(logings){
      // 如果跳转报错则重新到登录页，并清除token值，这步是为了防止制造假的token值
      if(data.error === 400){
        next({name: 'login'})
        localStorage.removeItem('token')
        //不执行下面的操作
        return
      }
      // 如果登录成功还要去登录页，则不让进让其进入首页
      if(to.name === 'login'){
        next({name:'home'})
      }else{
        return 
      }
    }
    // 没有token值并要去登录页则让其进入登录页
    if(!logings&&to.name==='login'){
      next()
    }
    // 没有token值biang想访问其他的页面，抱歉！请登录
    if(!logings  &&to.name !== 'login'){
      next({name:'login'})
    }
  }else{
     next()
  }
 
})

总结：

以上就是 美食杰项目 中 登录注册的具体实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。