电商前台项目（六）完结撒花：完成注册登录功能、路由守卫

一、完成注册部分

（1）获取验证码完成注册

首先把登录注册的静态页面搞过来，然后实现验证码部分，这里就是单纯的模拟一下，输入手机号，发送请求获取一个验证码，然后直接展示在文本框里，比较简单，就不多说了。

1.接口： //10.获取验证码的接口 // /api/user/passport/sendCode/{phone} export const reqRegisterCode = function(phone) { return requests.get(`/user/passport/sendCode/${phone}`); } 2.vuex： async getRegisterCode({commit}, phone) { try{ let result = await reqRegisterCode(phone); commit('GETREGISTERCODE', result.data); }catch(err) { console.log(err.message); } }, 3.双向绑定手机号，点击验证码按钮派发请求 getRegisterCode() { //来个逻辑短路 this.phone && this.$store.dispatch('login/getRegisterCode', this.phone); }, 12345678910111213141516171819202122

（2）完成注册用户业务

这部分也比较简单，主要是拿着手机号、验证码、密码去发送请求，添加到数据库。

1.接口 //11.注册用户的接口 // /api/user/passport/register export const reqRegisterUser = (phone, password, code) => { return requests({ method: 'post', url: '/user/passport/register', data: { phone, password, code } }) } 1234567891011121314

2.vuex async sendRegisterUser(context,{ phone, password, code}) { console.log(context); try { let result = await reqRegisterUser(phone, password, code); console.log(result); if(result.code == 200) { return '注册成功'; } if(result.code == 223) { return '该用户已注册！' } }catch(err) { alert('请求失败',err.message); } } 12345678910111213141516

3.点击注册按钮派发请求 data() { return { phone: '', //手机号 password: '', //密码 passwordConfirm: '', //确认密码 agree: false, //是否同意 } }, ....... async completeRegister() { try { //来个逻辑短路 const {phone, password, passwordConfirm, agree, registerCode} = this; if(phone&&registerCode&&password&&passwordConfirm&&password==passwordConfirm&&agree==true) { let result = await this.$store.dispatch('login/sendRegisterUser', {phone, code:registerCode, password}) alert(result); if(result == '注册成功') { this.$router.push({ name: 'denglu' }) } } }catch(err) { alert('注册失败！',err) } }, 1234567891011121314151617181920212223242526272829

二、登录

先click.prevent阻止默认提交表单的操作，避免跳来跳去。复习阻止事件默认行为入口

（1）点击登录发送请求校验

然后写登录接口，点击登录时拿着用户名密码发请求校验：

1.接口 //12.登录接口 // /api/user/passport/login export const reqUser = (phone, password) => { return requests({ url: 'user/passport/login', method: 'post', data: {phone,password} }) } 2.vuex //2.登录 async userLogin(context, {phone,password}) { let result = await reqUser(phone, password); console.log('登录请求成功',result); } 3.派发请求，路由跳转 userLogin() { try { let {phone,password} = this; (phone&&password)&&this.$store.dispatch('login/userLogin',{phone, password}); this.$router.push('/home'); }catch(err) { alert('登录请求失败！',err.message); } } 12345678910111213141516171819202122232425262728

请求数据后，服务端会返回一个字段，名字叫token

（2）保存下发的token

当我们点击登录，返回的数据是这样的，里面有一个字段叫token，它就是用户的唯一标识，将来我们请求用户相关的东西就要拿着这个token。
由于vuex是非持久性存储数据，一刷新就没了，所以我们要把token放在本地存储中

后面的每个请求都要和token有关，所以我们要把token写到请求头中

（3）拿着token请求用户数据并展示

这里有个问题，就是这个请求的派发应该写在哪里

1、如果只在home页写，那么跳转到其他页面点击刷新vuex中的用户数据就没了；但是如果每个用到用户名的组件都要派发，那就太麻烦了。
2、如果在app写，那么派发请求是在登录前，还没有token呢就请求不到数据，只有登录之后刷新页面（已经有token）才能请求到（刷新页面app肯定第一个挂载）

解决方案就是用路由守卫做判断，没有用户数据就派发请求。

这里我们先把派发home里。先把请求用户数据的接口写好：

//13.请求用户数据的接口 // /api/user/passport/auth/getUserInfo export const reqUserInfo = () => { return requests.get('/user/passport/auth/getUserInfo'); } 12345

vuex保存用户数据到仓库。

//3.请求用户数据 async getUserInfo({commit}) { let result = await reqUserInfo(); if(result.code == 200) { console.log(result); commit('GETUSERINFO',result.data); }else { console.log('请求用户信息失败，原因是：',result.message); } } 12345678910

先在home页派发请求（实际是不对的，去别的页面刷新就没用户名了）

（4）退出登录

Header组件中，读取vuex的用户数据，拿到用户名

<p>尚品汇欢迎您！</p> <p v-show="!userName"> <span>请</span> <router-link to="/login">登录</router-link> <router-link to="/register" class="register">免费注册</router-link> </p> <p v-show="userName"> <span>{{ userName }}</span> <router-link to="/login" class="register" @click.native="logout">退出登录</router-link> </p> ....... <script>computed: { userName() { return this.$store.state.login.userInfo.name; }} </script> 12345678910111213141516171819

<router-link>添加点击事件（别忘了加上个native），删除仓库的用户数据，删除用户的token

//退出登录，删除用户数据，删除token，跳回登录页 logout() { this.$store.state.login.userInfo = {}; //删除仓库数据，不知道直接这样好不好 localStorage.removeItem('token'); //删除token } 12345

（5）路由守卫（有点意思）

这里看起来比较绕，其实很简单，就三层逻辑

//前置路由守卫 router.beforeEach(async (to,form,next) => { // 加了这个守卫，不写next()，就不会放行 let token = localStorage.getItem('token'); //读取token的值 //1.1用户是否登录（有没有token） if(token) { //2.1登录了就不能再回到登录页 if(to.path == '/login') { next('/'); } //2.2登陆了去其他的页面 else { //3.1如果有用户数据，放行 if(store.state.login.userInfo.name) { next(); } //3.2如果没有用户数据，先请求成功再放行 else { try { //这个请求在挂载之前，所以刷新也会先请求 await store.dispatch('login/getUserInfo'); next(); }catch(err) { console.log('请求用户数据失败！',err); //这里还有一种情况，token过期请求不到 //那么就要清空token，重新登录 localStorage.removeItem('token'); next('/login'); } } } } //1.2如果没有登录 else { //没登录不能去的路由地址 let pages = ['/trade','/pay','/paysuccess','/center/myorder']; if(pages.includes(to.path)) { //如果没登陆往这几个页面跳，就回到登录页，并传想去的页面的地址 //这样能提升用户体验，登录完成后直接跳到刚才的页面 next(`/login?redirect=${to.path}`); }else { next(); } } }) 123456789101112131415161718192021222324252627282930313233343536373839404142434445

后面的支付部分我简单看了一下，比较简单，就是请求数据展示数据，elementUI展示收款二维码，收款反复发请求直到付款成功等，没有什么难点，就不做了。

完结撒花！！后面还会有更多项目的笔记，欢迎大家关注我和我一起攻克前端项目

相关知识

在线鲜花购物商城网站,网上花店订花,本地生活电商
计算机网络——应用层（完结撒花）
基于nodejs+vue网上鲜花销售系统
Axure鲜花商城网站原型图，网上花店订花本地生活电商30页，RP成品
南靖兰花电商产业园项目
鲜花电商，与鲜花电商的更多相关内容
鲜花网项目实战（一）
宿豫电商园区商业综合体配电工程公平竞争审查公开征求意见公告宿迁市公共资源交易电子服务平台
花易宝获评省级电商示范平台与云品电商分拣集散中心示范项目双项荣誉
java毕业设计基于spingboot的网上鲜花销售系统

网址: 电商前台项目（六）完结撒花：完成注册登录功能、路由守卫 https://www.huajiangbk.com/newsview849512.html