前段vue电商网站注册登录的流程笔记

本文详细讲解了如何设计登录、注册流程,确保未登录用户只能访问部分页面,登录用户才能访问受限功能,并介绍如何存储用户信息、路由守卫和表单验证。关键步骤包括设置路由权限、表单提交验证和使用全局与独享守卫保护敏感页面。

主要是逻辑方面。

先创建登录 login 组件,register 注册组件,以及 home 等其他组件。

1、用户可在未注册未登录的情况下可以正常访问一些页面,例如:电商首页,商品详情页等等。

2、需要用户注册登录才能访问的页面例如:购物车页面,支付页面,个人中心页面等等。

3、注册登录成功之后还需要在网页显示 用户信息。

注册页面

表单验证(略)

完成了表单内容,将表单内容的手机号提交给服务器,获取验证码。

 

将表单内容和验证码提交给服务器发起注册请求,注册成功后跳转到登录页面

 登录页面

表单验证(略)

将表单信息收集提交给服务器发起登录请求。

 路由当中是否包含 query 指定路由:当用户在还未登录的情况下,访问我的订单页面,会立即跳转到登录页面,用户登录成功以后则会 跳转到 我的订单页面。

登录成功以后把用户 token 存储到仓库和本地存储中。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值