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 =>