vue移动端 登录注册的业务流程

news/2024/7/9 23:56:39 标签: vue

在我们开发一些项目的时候,有些路由页面是要登录才能进入,例如进入个人中心,或者我的博客,写博客等等一些页面…
当然,也有一些页面是不需要登录就能进去的,例如:首页,注册页等等…
当需要登录的页面,我们就要加上验证,不需要的则不用
该如何判断呢?就该在路由里的js加一些代码来判断了

登录流程

判断用户是否登录
第一次登录的时候,前端调后端的登陆接口,发送用户名和密码,后端收到请求,验证用户名和密码
如果想点进我的页面,没有登录的话,会自动跳转登录页面,前端可根据后台返回的信息,在路由跳转中做判断。因为在这里使用的 axios做vue的请求模块,所以项目采用的是在请求拦截模块中根据后台返回的登录状态码进行判断
客户端输入手机号,点击验证码,进行登录,服务端对手机号,验证码进行验证,验证通过,则说明登陆成功,根据当前用户信息,生成了token,将token信息以cookie形式返回到了客户端
在这里插入图片描述
登录成功保存用户状态信息
验证成功,就给前端返回一个token,前端拿到token,将token存储到localStorage和vuex中
在这里插入图片描述
并跳转路由页面
前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面
每次调后端接口,都要在请求头中加token,我们常用axios的请求库中,添加全局拦截器,将token设置在请求头中。
后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401
如果前端拿到状态码为401,就清除token信息并跳转到登录页面


http://www.niftyadmin.cn/n/874673.html

相关文章

matlab分块矩阵取某一块_MATLAB3: 矩阵分块函数mat2cell 及 cellfun 函数

MATLAB 矩阵分块函数 mat2cell 及 cellfun 函数一、矩阵分块函数 mat2cellmat2cell 函数就是将矩阵转化成胞元数组(cell array),用数学的语言讲就是矩阵分块。x是60*50的大矩阵。mat2cell函数二、cellfun 函数cellfun 函数就是对每一个块做相同的操作,例…

vfp python_Visual Fox Pro和Python

如果你以前听过这个,请停止我:“我有一个DBF阅读模块(pydbfrw),我一直想发布“有一天” 添加您想要的功能比破解dbf模块的源代码要容易得多:>>> import pydbfrw >>> d pydbfrw.DBFreade…

Vue大型项目之分模块运行/打包

最近写的小项目比较多,而且都是差不太多的,每个项目创建个工程,多少有点不好维护,所以决定把他们放在一个项目下,以vue-cli3为例,实现多系统集成下的分模块打包。分模块打包方式多种多样,可以适…

小米商城html_小米商城新活动!暖心好物盘点,手机电视均有优惠

10月11日消息,目前,小米商城正举办暖心好物盘点活动,超旗舰性能的小米9 Pro 5G只需3699元,参与特惠的还有笔记本、电视和洗衣机等多件商品。据了解,这次参与活动的有两款是手机,分别是超旗舰性能的小米9 Pr…

安装node-sass时报python2_为什么有Python代码?怎么解决npm install node-sass..._慕课问答...

gyp info spawn args -Dnode_enginev8, gyp info spawn args --depth., gyp info spawn args --no-parallel, gyp info spawn args --generator-output, gyp info spawn args D:\\WorkStudy\\StudySpace\\慕课网\\Web阅读器开发\\node_modules\\node-sass\\build, gy…

有网络无internet访问_快速解决无网络internet访问权限

无网络internet访问权限解决方案:方案一:疑难解答1、右击右下角网络图标,选择“疑难解答”。2、然后尝试修复网络问题,一般都能解决基础的网络故障。方案二:检测路由和Modem1、请您将Modem和路由器断电后至少等待30秒钟…

resin连接mysql账户失败_resin access log导致的锁问题一例

线上遇到的一个case,应用结构是nginx----->resin---java,其中nginx做lb,resin做为java的容器。在nginx层面做http code的监控,发现有4xx比例高的的报警:分析nginx日志,发现是由于499比例高导致xxx xxxxx…

tortoisegit中文_如何使用TortoiseGit指北,一篇讲清

点击上方“编程三分钟”,马上关注,每天早上8:50准时推送。PS: 昨天的红包彩蛋,你找到了吗?来自CSDN zhangbinu 独家授权小熊做了部分修改“ 不会用命令,用可视化工具也成啦~ ——编程三分钟”TortoiseGit密钥设置1. 安…