token过期后记录当前页面路由,重新登陆跳转至原页面

实现当token过期,重新登录后返回原页面

思路:在响应拦截器中获取到token过期的状态码401,使用router.currentRoute.fullPath方法获取到当前页面的路由地址,以路径参数的形式放到登录页面地址的后面。重新登陆后,使用this.$route.query方法获取路径地址参数并跳转至该路由页面。

代码:

//响应拦截其中

//导入router
	import router from '../router'


    if (code === 401) {
      if (!isRelogin.show) {
        isRelogin.show = true
        MessageBox.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            isRelogin.show = false
            store.dispatch('LogOut').then(() => {
              // router.currentRoute.fullPath,获取跳转前的地址,放到登录页面地址的后面
              // 防止地址含有特殊字符,使用encodeURIComponent()方法将其转义
              router.push({ path: `/login?path=${encodeURIComponent(router.currentRoute.fullPath)}` })
            })
          })
          .catch(() => {
            isRelogin.show = false
          })
      }
      return Promise.reject('无效的会话,或者会话已过期,请重新登录。')
    }
//登录函数
handleLogin() {
		this.$store.dispatch("Login", this.loginForm)
            .then(() => {
              // 使用decodeURIComponent()进行解码
              this.$router
                .push({
                  decodeURIComponent(this.$route.query.path) !== "undefined" ? decodeURIComponent(this.$route.query.path) : "/",
                })
                .catch(() => {});
         })
	}

注意:当原页面路径地址含有多个路径参数时(含有&等特殊符号),需要使用encodeURIComponent()方法将其转义。在登录时使用decodeURIComponent()函数进行解码。

你可能感兴趣的:(前端,vue)