Vue3后台通用管理系统：用户登录与跳转、全局路由守卫

// 在 Vue3 项目中使用 Vue Router 设置全局路由守卫
import { createRouter, createWebHistory } from 'vue-router'
import store from '@/store' // 假设 store 已正确导入并配置
 
// 创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    // 定义路由
  ],
})
 
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 如果路由要求登录，则检查用户是否已经登录
  if (to.matched.some(record => record.meta.requiresAuth) && !store.state.isLogin) {
    // 如果未登录，跳转到登录页面
    next({
      path: '/login',
      query: { redirect: to.fullPath }, // 将目标路由作为重定向参数传递
    })
  } else {
    // 如果已登录或不需要登录，继续路由导航
    next()
  }
})
 
export default router

这段代码设置了 Vue Router 的全局前置守卫，用于在路由跳转前检查用户是否登录。如果用户未登录而目标路由需要登录，则会被重定向到登录页面，并带上当前路径作为重定向参数，以便登录后可以返回到原页面。这是一个典型的用户权限控制实践。