目录

• 前言：
• 具体效果：
• 代码思路
• 相应的组件：
• 具体代码：
• • • • all页面的具体代码：
      • login页面具体代码：
  • **登录和注册的基本功能都一样所以没有注释**
  • • • enroll页面的具体代码：
• 路由相关代码：
• • • • 相关引入：
      • 路由配置：
      • 路由守卫代码：
• 总结：

前言：

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

具体效果：

未登录：

登录成功：

代码思路

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

相应的组件：

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

具体代码：

all页面的具体代码：

login页面具体代码：

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

enroll页面的具体代码：

路由相关代码：

相关引入：

路由配置：

路由守卫代码：

// 登录验证完成之后，就要进行跳转，路由导航守卫进行拦截，判断是否真的验证成功router.beforeEach(async (to,from,next)=>{// console.log(to)// 将存储的token值拿出来// token为用户登录验证，后端返回的一个秘钥let token = localStorage.getItem('token')// 将token值转换成布尔值 有token值则为true 没有则为falselet logings = !!token // 拿到用户的基本信息let data =  await userInfo()// console.log(Store)// 将用户的基本信息传进vuexStore.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()}})

总结：

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