目录

• 前言：
• 具体实现思路：
• 步骤：
• • 1. 展示美食杰菜谱大全效果
  • 在这里插入图片描述
  • 2. 引入element-ui
  • 3. 代码
• 总结：

前言：

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

具体实现思路：

1. 引入element-ui中的登录和分页功能实现方法
2. 账号密码进行双向绑定
3. 登录和注册把账号密码传递过去
4. 成功把token报错至本地，失败则返回失败的结果
5. 点击清空input框
6. 引入当前的vuex，并写出所有路由跳转
7. 使用全局导航守卫和meta字段进行登录验证判断
8. 判断跳转的路由是否需要登录，已登录则判断是否获取到用户信息
9. 未获取则删除存储至本地的 token，跳转至登录页
10. 判断是否有 token 值，没有跳转至登录
11. 判断已登录，并且跳转至登录页，跳转至首页

步骤：

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()// 存储至 vuexstore.commit('userInfo', user.data)// 判断跳转的路由是否需要登录（meta 路由元信息）if (to.matched.some((item) => item.meta.IsLogin)) {// 判断是否获取到用户信息if (user.error == 400) {// 删除存储至本地的 tokenlocalStorage.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

• 登录注册的根页面

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

• 登录页

• 注册页

总结：

总结：
以上就是 美食杰项目 中 登录注册的具体实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog