vue 项目中 登录失效重新登录成功之后 页面跳转回之前登录失效的页面

常见的,项目入口  通过判断token(访问接口的凭证)是否存在,如果不存在,让用户重新登录

1、地址重定向到登录,用一个参数保存重定向之前的页面地址,我们这里用的redirect

vue 项目中 登录失效重新登录成功之后 页面跳转回之前登录失效的页面_第1张图片

2、在登录页面,先获取保存的重定向路径, state.redirect保存的是路径,state.otherQuery保存的是地址里的传参

vue 项目中 登录失效重新登录成功之后 页面跳转回之前登录失效的页面_第2张图片

3、登录成功之后,判断是否存在重定向地址,存在则跳转重定向的地址(这里跳转之前我加了个判断,就是redirect是否存在'?',如果存在,说明地址本身就包含了参数,只需要把otherQuery里的参数拼接进去就好了,下面有解释为什么要这样判断,这是我想到的办法,欢迎指正。。。。)

vue 项目中 登录失效重新登录成功之后 页面跳转回之前登录失效的页面_第3张图片

注:这里有个要主要的地方,就是router.push传递参数的问题

如果是这样写:

router.push({path: '/student/home?stuid=1'}),这时候这个stuid这个参数是传递不过去的,跳转之后的地址变成了/student/home,没有参数

如果是这样写:

router.push('/student/home?stuid=1'),这时候的参数就可以传过去了

 

你可能感兴趣的:(vue,常见问题记录,vue,typescript,登录页面重定向)