前言：
本文给大家讲解，美食杰项目中 登录注册实现的效果，和具体代码。
具体实现思路：
引入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>
总结：
总结：
以上就是 美食杰项目 中 登录注册的具体实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
