脚本宝典收集整理的这篇文章主要介绍了H5页面结合vue实现登录注册组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

介绍

 结合`vue`框架作手机H5页面的登录注册组件

登录注册相关知识点

1.cookie和token的作用（个人理解，如果不到位，恳请指出）

token：
我的电脑通过http请求登录某一个网页，登录成功之后，服务器会返回一个token给我的电脑。
然后我只要把这个token保存下来,等下一次用我的电脑请求同一个页面时，服务器会自动验证我的token。
它会用它自己才知道的密钥解析这个token是不是它上一次发送给我电脑的。
如果解析之后数据一致，那么我就可以不用登录直接访问页面，如果不一致，则会认证不通过。

cookie：登录之后，服务器也会返回一个cookie给我的浏览器。
cookie的作用是可以保存在本地。所以这里我是用请求到的token保存在cookie里面。
就可以做到下次免登录就可以访问页面了。

2.登录注册与cookie、token的联系

第一次登录注册------->服务器返回token、cookie----->不保存token，关闭浏览器---->下一次登录需要输入账号密码

第一次登录注册------->服务器返回token、cookie----->把token保存在cookie里面，使其token保存在本机上----->关闭浏览器---->下一次登录不需要账号密码就可以访问该页面

3.获取cookie、设置cookie、删除cookie

1）把这个三个方法放在公共的js文件中，需要用到时调用

4.代码实现

1）.用v-model双向绑定数据

点击下一步的时候，用正则判断用户名和手机号是否是满足要求，满足要求则可以点击下一步

同样，也是用v-model双向绑定数据

---

2）.我把ajax请求放在api文件里面，在组件需要用到的时候，再调用这个函数

3）.在登录注册组件调用这个函数

引进请求后台接口的函数，以及设置cookie的函数

import { getCodeNum, getRegister } From 'api/register.js'
import { setCookie } from 'common/js/cookie.js'

4）.在路由进入之前判断有没有token，是为了请求用户信息的接口，可以获取注册成功之后的头像以及用户名

5）.退出登录，清除cookie

脚本宝典总结

以上是脚本宝典为你收集整理的H5页面结合vue实现登录注册组件全部内容，希望文章能够帮你解决H5页面结合vue实现登录注册组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。