需求描述：
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 只有上一页的路由信息，没有更多的路由历史记录