（vue3）vite+ts登录后返回上一页或首页实现方法

需求描述：

1、有的页面需要登录后才能访问，未登录时，输入页面路由会自动跳转到登录页，登录成功后再跳回刚才要访问的页面
2、有的页面可以访问，但是点击页面中的某些操作按钮，没有登录的话需要跳到登录页，登陆成功后返回该页面，登录后再点击操作按钮可以进行下一步操作

实现方法

一、在 router 文件下的 “index.ts” 路由配置中添加页面访问权限设置

给路由添加 meta 属性 “requiresAuth”，
如果需要登录后访问- - -“requiresAuth: true”
不需要登录后访问- - -“requiresAuth: false”

代码示例：
index.ts：

routes: [
	{
      path: '/',
      name: 'home',
      component: HomeView,
      meta: {
        title: '首页',
        requiresAuth: false
      }
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login/index.vue'),
      meta: {
        title: '登录',
        requiresAuth: false
      }
    },
    {
      path: '/order',
      name: 'order',
      component: () => import('../views/order/index.vue'),
      meta: {
        title: '我的订单',
        requiresAuth: true
      }
    },
]

二、在 “main.ts” 文件中添加路由守卫

根据路由的 to.meta.requiresAuth 属性值，判断要访问的路由是否需要登录后才可访问，getToken() 是获取 token，登录后服务器端会生成一个 token，需要客户端保存一下该 token 到本地 cookie 中，getToken() 需要自己实现。

代码示例：
main.ts：

import router from './router'

router.beforeEach(async (to: any, from, next) => {
  // 判断是否需要登录后才可访问
  if (to.meta.requiresAuth) {  // 登录后才能访问
    if (!getToken()) { // 没有登录
      next(`/login?redirect=${to.path}`)
    } else { // 已经登录
      next()
    }
  } else {  // 不用登陆就可访问
    if (getToken()) {  // 如果已经登录，访问登录页面的话跳转到首页
      if (to.path == '/login') {
        next({
          path: '/'
        })
      }
    }
    next()
  }
})

三、登录页添加登录后跳转设置

代码示例（伪代码）：

import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const back = router.options.history.state.back

const redirectUrl = route.query.redirect
const redirectUrlStr = ref('')
if (redirectUrl) {
  redirectUrlStr.value = redirectUrl.toString()
}

// 调用登录接口 、、、（根据实际操作编写代码）
if(登陆成功) {
	// 返回上一页或者首页
    if (redirectUrl) {
      router.replace({ path: redirectUrlStr.value })
    } else if (back) {
      router.go(-1)
    } else {
      router.replace({ path: '/' })
    }
}

注意事项：

1、如果登录成功后，使用的 router.push() 返回上一页，回到登陆前的上一页后，再点击浏览器的“返回上一页” 箭头，返回的是去登录页，而不是 要登录才可以访问的页面的前一页

2、如果没有登录时浏览器中直接输入要登录后才可以访问的页面 a 路由，会跳转到登录页，但登录页 的 “router.options.history.state.back” 中没有 记录到是由 路由a 跳转到登录页的；
如果是访问一个不用登陆可以访问的页面 b，在该页面进行具体操作按钮，才跳出登陆页，此时登录页的 “router.options.history.state.back” 中会有 该 页面 b 的路由信息

3、router.options.history.state.back 只有上一页的路由信息，没有更多的路由历史记录