H5页面结合vue实现登录注册组件

ygyooo 发布于2019-08-23 14:02 / 653人阅读

摘要：介绍结合框架作手机页面的登录注册组件登录注册相关知识点和的作用个人理解，如果不到位，恳请指出我的电脑通过请求登录某一个网页，登录成功之后，服务器会返回一个给我的电脑。

介绍

 结合`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

GPU云服务器云服务器 vue组件 js注册登录页面 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99974.html

微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
vue学习笔记3

摘要：主要当作属性来使用方法表示一个具体的操作，主要书写业务逻辑一个对象，键是需要观察的表达式，值是对应回调函数。Vue.js - Day3 定义Vue组件什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开...

番茄西红柿 2019-04-23 11:45 评论0 收藏0