VUE实现已登录账号在地址栏输入登录页地址无痕跳转到首页

本文介绍了如何在Vue项目中,当用户已登录且在地址栏输入登录页URL时,避免返回登录页并直接跳转到首页。主要涉及两个步骤:一是通过判断token的有效性来确认用户状态,可以使用维护token有效期或者调用校验接口的方法;二是选择合适的跳转方式,如在登录页、空白页或main.js中进行判断。后台的校验逻辑因项目而异,前端代码中则展示了具体的实现细节。
摘要由CSDN通过智能技术生成

vue项目已登录,然后在地址栏输入登录页地址,还是跳转到了登录页。为提升用户体验,需要实现在输入登录页地址时,跳转到首页。

实现这个小功能:有两个步骤
1.判断token,不能简单的判断是否为空,还要判断是否有效,判断是否有效有两个方式:
(1)在页面维护token有效期,这种方式简单,但是在其他浏览器登录,当前的token维护的有效期就不准了。
(2)写一个校验接口。
2.怎么实现跳转,有三种方式:
(1)可以在登录页面进行判断,但是这样会实现闪屏,页面会闪下登录页面,然后再跳转到首页。
(2)实现一个空白页面作为vue的起始页面,在这个页面里进行判断是跳转到首页还是跳转到登录页面。
(3)在main.js中实现。

后台的代码就不上了,因为大家的后台不同,实现安全校验的逻辑也不同。我在后台添加的校验token的url是“/check/token“

下面是前端页面的代码,“/Home"为我的首页。
main.js中的代码涉及到的是下面两部分
axios拦截

// 创建axios实例
const service = axios.create({
   
  // 请求超时时间
  timeout: 30000
})
service.interceptors.response.use(
  response =>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WangSheng Mr

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值