❤️看这里 怎么实现退出再登录，刚好返回上一次浏览的页面

前言

登录某个页面，又退出，我们希望再次登录又回到上一次的页面，该如何处理？我们先来看一个例子：

// 1、登录某个页面，地址栏显示：
http://192.168.85.136:8080/#/category/1011000
///2、退出登录，地址栏显示：
http://192.168.85.136:8080/#/login?redirectUrl=%2Fcategory%2F1011000
///3、再次登录，地址栏显示：
http://192.168.85.136:8080/#/category/1011000
复制代码

有没有发现退出登录的时候，地址栏返回了一串东西：redirectUrl=%2Fcategory%2F1011000? 这是什么呢？这是我们退出的时候，浏览器“偷偷”把我们当前页面的地址给记录下来了，再次登录就返回了上一次呆过的页面啦！

一、Vue3 的处理

1、退出处理

// 需要导入 useRouter, useRoute
import { useRouter, useRoute } from 'vue-router'
export default {
  setup () {
    const router = useRouter()
    const route = useRoute()
    const logoutHandler = () => {
      // 此处省略其他。。。。。。
      // router.push('/login')
      // redirectUrl 这个名字自己定义，但必须和登录中跳转代码保持一致
      // encodeURIComponent 编码
      router.push('/login?redirectUrl=' + encodeURIComponent(route.fullPath))
    }
    return { logoutHandler }
  }
}
复制代码

2、登录处理

// 需要导入 useRouter, useRoute
import { useRouter, useRoute } from 'vue-router'
export default ({
  setup () {
    const router = useRouter()
    const route = useRoute()
    const loginHandler = () => {
      // 此处省略其他。。。。。。
      // router.push('/')
      // decodeURIComponent 解码
      router.push(decodeURIComponent(route.query.redirectUrl) || '/')
    }
    return { loginHandler }
  }
})
复制代码

3、响应拦截器中响应错误处理

import router from '@/router'
if (error.response && error.response.status === 401) {// 根据具体情况写判断条件
    // 此处省略其他
    // router.push('/login')
    router.push('/login?redirectUrl=' + encodeURIComponent(router.currentRoute.value.fullPath))
  }
复制代码

二、Vue2 的处理

1、退出处理

methods: {
    logoutHandler() {
      // 此处省略其他
      // this.$router.push('/login')
      // return_url 这个名字自己定义，但必须和登录中跳转代码保持一致
      // encodeURIComponent 编码
      this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath))
    }
  }
复制代码

2、登录处理

methods: {
    loginHandler() {
      // 此处省略其他
      // this.$router.push('/')
      // decodeURIComponent 解码
      this.$router.push(decodeURIComponent(this.$route.query.return_url) || '/')
    }
  }
复制代码

3、响应拦截器中响应错误处理

import router from '@/router'
if (error.response.data.code === 10002) {// 根据具体情况写判断条件
    // 此处省略其他
    // router.push('/login')
    router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
  }