前言：

本文给大家讲解，美食杰项目中登录注册实现的效果，和具体代码。

具体实现思路：

引入element-ui中的登录和分页功能实现方法

账号密码进行双向绑定

登录和注册把账号密码传递过去

成功把token报错至本地，失败则返回失败的结果

点击清空input框

引入当前的vuex，并写出所有路由跳转

使用全局导航守卫和meta字段进行登录验证判断

判断跳转的路由是否需要登录，已登录则判断是否获取到用户信息

未获取则删除存储至本地的 token，跳转至登录页

判断是否有 token 值，没有跳转至登录

判断已登录，并且跳转至登录页，跳转至首页

步骤：

1. 展示美食杰登录注册效果

2. 引入element-ui

点击跳转至 element-ui 中 Tabs 标签页使用方法：https://element.eleme.cn/#/zh-CN/component/tabs

点击跳转至 element-ui 中 Form 表单页使用方法：https://element.eleme.cn/#/zh-CN/component/form

3. 代码

路由跳转页（router）

import Vue from 'vue'
import VueRouter from 'vue-router'
// import home from '@/components/home.vue'
import { userInfo } from '@/connector/api'
// 引入当前的vuex
import store from '@/store/index'
Vue.use(VueRouter)
const routes = [    
  {
    path: '/',
    name: 'home',
    title: '首页',
    component: ()=>import('@/components/home.vue'),
    children: [
      {
        path: '',
        name: 'page',
        alias: 'page',
        title: '首页',
        component: ()=>import('@/views/home-page/index'),
      },
      {
        path: 'recipes',
        name: 'recipes',
        title: '菜谱大全',
        component: () => import('@/views/Daquan-recipes/index'),
      },
      {
        path: 'login',
        name: 'login',
        title: '登录',
        component: ()=>import('@/views/login/index'),
      },
      {
        path: 'DishesInformation',
        name: 'DishesInformation',
        title: '菜谱详情',
        component: () => import('@/views/DishesInformation/index'),
      },
      {
        path: 'MyHomepage',
        name: 'MyHomepage',
        title: '个人主页',
        redirect: { name: 'works' },
        component: () => import('@/views/MyHomepage/index'),
        meta:{
          IsLogin: true,
        },
        children: [
          {
            path: 'works',
            name: 'works',
            title: '作品',
            component: () => import('@/views/MyHomepage/roll'),
            meta: { login: true },
          },
          {
            path: 'collection',
            name: 'collection',
            title: '收藏',
            component: () => import('@/views/MyHomepage/roll'),
            meta: { login: true },
          },
          {
            path: 'fans',
            name: 'fans',
            title: '粉丝',
            component: () => import('@/views/MyHomepage/bean'),
            meta: { login: true },
          },
          {
            path: 'following',
            name: 'following',
            title: '关注',
            component: () => import('@/views/MyHomepage/bean'),
            meta: { login: true },
          },
        ]
      },
      {
        path: 'PublishRecipes',
        name: 'PublishRecipes',
        title: '发布菜谱',
        component: () => import('@/views/PublishRecipes/PublishRecipes'),
        // 路由元信息，加上可以用来判断是否需要登录
        meta:{
          IsLogin: true,
        }
      },
      {
        path: 'personal',
        name: 'personal',
        title: '编辑个人资料',
        component: () => import('@/views/personal/index'),
      }
    ]
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// meta为路由元信息，加上可以用来判断是否需要登录
// 路由守卫
router.beforeEach(async (to, from, next) => {
  // 获取存储至本地的 token 验证
  let token = localStorage.getItem('token')
  // 判断是否有值（!!token 返回 true 和 false）
  let islogin = !!token
  // 获取用户信息
  let user = await userInfo()
  // 存储至 vuex
  store.commit('userInfo', user.data)
  // 判断跳转的路由是否需要登录（meta 路由元信息）
  if (to.matched.some((item) => item.meta.IsLogin)) {
    // 判断是否获取到用户信息
    if (user.error == 400) {
      // 删除存储至本地的 token
      localStorage.removeItem('token')
      // 跳转至登录页
      window.location.href = '/login'
    } else {
      // 判断是否有 token 值
      if (islogin) {
        next()
      } else {
        // 没有跳转至登录
        window.location.href = '/login'
      }
    }
  } else {
    // 判断已登录，并且跳转至登录页
    if (islogin && to.path === '/login') {
      // 跳转至首页
      window.location.href = '/'
      return
    }
    next()
  }
})
export default router

登录注册的根页面

登录注册页大致相同，只需要把接口进行改变，其他的都可以直接复制过去

<template>
  <div class="login-page">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="登录" name="login">
        <Login></Login>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <Register></Register>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Login from "./login.vue";
import Register from "./register";
export default {
  components: { Login, Register },
  data() {
    return {
      // 进入时显示的页面
      activeName: "login",
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.login-page {
  width: 500px;
  background-color: #fff;
  margin: 20px auto 0;
  box-shadow: 0 0 25px #cac6c6;
  border-radius: 10px;
}
</style>

登录页

<template>
  <div class="login-section">
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      ref="ruleFroms"
    >
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add('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 {
      formLabelAlign: {
        // 用户名
        username: "",
        // 密码
        password: "",
      },
    };
  },
  methods: {
    add() {
      // 用户名和密码不能为空
      if (
        this.formLabelAlign.username !== "" &&
        this.formLabelAlign.password !== ""
      ) {
        // 登录接口
        login({
          name: this.formLabelAlign.username,
          password: this.formLabelAlign.password,
        }).then((data) => {
          // console.log(data);
          // 判断是否登录成功
          if (data.code === 0) {
            // token 存储至本地
            localStorage.setItem("token", data.data.token);
            // 跳转至首页
            window.location.href = "/";
          } else {
            // 登录失败则返回失败问题
            this.$message({
              message: data.mes,
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "账号或密码不能为空！",
          type: "warning",
        });
      }
    },
    // 清空 input 框
    reset() {
      this.formLabelAlign.username = "";
      this.formLabelAlign.password = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.login-section {
  padding: 0 20px;
}
</style>

注册页

<template>
  <div class="login-section">
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      ref="ruleFroms"
    >
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">提交</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 {
      formLabelAlign: {
        // 用户名
        username: "",
        // 密码
        password: "",
      },
    };
  },
  methods: {
    add() {
      // 用户名和密码不能为空
      if (
        this.formLabelAlign.username !== "" &&
        this.formLabelAlign.password !== ""
      ) {
        // 注册接口
        register({
          name: this.formLabelAlign.username,
          password: this.formLabelAlign.password,
        }).then((data) => {
          console.log(data);
          // 判断是否登录成功
          if (data.code === 0) {
            // 跳转至登录页
            window.location.href = "/login";
          } else {
            // 注册失败则返回失败问题
            this.$message({
              message: data.mes,
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "账号或密码不能为空！",
          type: "warning",
        });
      }
    },
    // 清空 input 框
    reset() {
      this.formLabelAlign.username = "";
      this.formLabelAlign.password = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.login-section {
  padding: 0 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>