点击了登录,如何进入主页

本文详细介绍了前端登录过程,包括通过axios获取接口、收集用户参数、设置请求头、代理转发、后端服务器交互、响应拦截器处理、token保存与路由跳转策略。在路由变化时,若token存在且非登录页,会获取用户信息,确保安全的页面跳转。
摘要由CSDN通过智能技术生成

1.点了登录:

(1):获取axios实例((基地址从环境变量中获取)
(2):获取封装好的接口
(3):收集用户的参数,传给第二步中的接口, 页面上收集页面的数据名与接口一样
(4):经过请求拦截器,添加请求头
(5):代理转发
(6):后端服务器要启动,本地数据库也要启动;后端才能收到请求,返回数据
(7):经过相应拦截器的处理
(8):得到接口调用之后的结果
(9):保存token,token做持久化

2:页面跳转(路由跳转)

(1):全局路由前置守卫.只要有路由变化,当token不为空时,且要访问的页面不是login,就会去获取用户信息

例:
在这里插入图片描述
3:获取用户信息

例:

在发出任意的ajax时,一定会进入到请求拦截器中. 主要的工作是:添加token

例:

当在Vue登录页面点击登录按钮时,会跳转至首页。具体的实现步骤如下: 1. 首先,需要在Vue的登录页面组件中,创建一个表单用于接收用户输入的登录信息,包括用户名和密码。 2. 在Vue组件的data属性中,定义用户名和密码的变量,并初始化为空字符串。 3. 在登录按钮上添加一个点击事件的监听器,并指定一个处理函数。 4. 在处理函数中,可以通过Vue框架提供的方法,获取用户在输入框中输入的用户名和密码。 5. 对用户输入的用户名和密码进行一些必要的验证,例如判空、长度等。如果验证不通过,可以在页面上显示错误信息。 6. 如果验证通过,可以将用户名和密码发送给后台服务器进行登录验证。可以通过Vue的Axios库等工具,发送一个POST请求,将输入的用户名和密码作为请求参数发送到服务器的登录接口。 7. 在服务器端进行登录验证,如果用户名和密码正确,返回一个登录成功的状态码(例如200),否则返回一个登录失败的状态码(例如401)。 8. 在Vue的登录页面组件中,根据服务器返回的状态码进行判断。如果登录成功,可以使用Vue的router库跳转至首页组件。 9. 在Vue的路由配置中,保证首页组件与登录页面组件的路径匹配。可以使用Vue的router-link标签进行页面跳转。 10. 当成功跳转至首页组件时,用户就可以访问到该页面的内容,实现从登录页面跳转至首页的功能。 总结起来,通过在Vue登录页面组件中监听登录按钮点击事件,获取用户的登录信息并发送至服务器进行验证,并根据验证结果跳转至首页组件,就可以实现从登录页面点击登录按钮进入首页的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值