系统登录后到底应该怎么跳

207 阅读2分钟

业务场景:登录应用后当正要访问某个页面时,此时token失效,重新登陆后希望访问该页面,而不是home页面!(目前系统做的是在响应拦截时通过code码判断如果是token超时的情况会跳转到登录页面,但实际上加上router.beforeEach逻辑会有redirect参数不正确的问题,不建议在响应拦截时跳转到登录页,可以加些别的交互逻辑,比如提醒用户token失效,请退出重新登陆,但是得保证退出接口能正常调用)

实现方式 1.路由拦截时判断没有权限进行跳转登录页,此时需要记录是从哪个页面进入的登录页,eg

  router.push({
         path: '/login',
        query: { redirect: to.fullPath }  // 将跳转的路由path作为参数,登录成功后跳转到该路由
      })

2.在login页面

  • a.登录成功时获取下页面的查询参数redirect,eg:
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },

或者直接在created生命周期函数中获取。

  • b.点击登录成功后进行跳转,eg
this.$router.push({ path: this.redirect || '/' })

3.统一认证进行重定向到别的服务进行认证也一样,需要保证redirect参数正确。

画了一个简单的流程图,哈哈,不太会画,自己将就着能看啦😁

image.png

需要注意的地方,不要用this.$router.go(-1)去实现,因为跳转到统一认证页面有很多重定向页面逻辑,这些虽然不是本系统中的页面,但是都属于历史记录;要使用fullPath,因为它会保留query参数

最后,这个功能做完了,但是也存在一些问题吧,主要是权限变更的问题,比如:

  • 1.A用户在访问/aaa页面,token失效后被退回到login页面,但此时B用户用A用户的页面进行登录,跳转的页面没有权限
  • 2.A正在访问的页面功能被下线了

哈哈,上面问题是做完了,另一个同事说不能这么做,要统一跳到home页面。你们觉得应该这样做嘛,会存在哪些问题,欢迎评论区留言🤝🤝🤝