Vue3+TS路由拦截器实战与权限控制

npm init vue@latest my-project -- --template typescript
cd my-project
npm install vue-router@4

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

// 定义类型化路由配置
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/HomeView.vue'),
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/LoginView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

router.beforeEach((to, from, next) => {
  // 类型化meta信息
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  const isAuthenticated = localStorage.getItem('token')
  
  if (requiresAuth && !isAuthenticated) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  } else {
    next()
  }
})

// src/types/router.d.ts
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
    transitionName?: string
  }
}

router.beforeEach((to) => {
  const userRoles = getUserRoles() // 获取当前用户角色
  const requiredRoles = to.meta.roles as string[] | undefined
  
  if (requiredRoles) {
    const hasPermission = requiredRoles.some(role => 
      userRoles.includes(role)
    )
    
    if (!hasPermission) {
      return { path: '/403' }
    }
  }
})

router.beforeEach(async (to) => {
  if (to.meta.preloadData) {
    try {
      await store.dispatch('fetchRequiredData', to.params)
    } catch (error) {
      console.error('数据预加载失败:', error)
      return { path: '/error', query: { code: 'DATA_LOAD_FAILED' } }
    }
  }
})

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm('确定要离开吗？未保存的更改将会丢失')
      if (!answer) return false
    })

    onBeforeRouteUpdate(async (to) => {
      await fetchData(to.params.id)
    })
  }
}

component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')

const cachedRoutes = new Set()
router.beforeEach((to) => {
  if (cachedRoutes.has(to.path)) {
    to.meta.keepAlive = true
  }
})

import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'

test('auth guard redirects to login', async () => {
  const mockRouter = createRouter({
    history: createWebHistory(),
    routes: [/* 测试路由 */]
  })
  
  mockRouter.beforeEach(authGuard)
  
  await mockRouter.push('/protected')
  expect(mockRouter.currentRoute.value.path).toBe('/login')
})

router.beforeEach((to, from) => {
  console.log('[Route]', from.path, '→', to.path)
})

if (import.meta.env.DEV) {
  router.beforeEach(devToolsGuard)
}

// src/router/guards/permission.ts
export function createPermissionGuard(router: Router) {
  router.beforeEach(async (to) => {
    const { meta, matched } = to
    const { requiresAuth, roles } = meta
    
    // 获取用户权限状态
    const { isAuthenticated, userRoles } = useAuthStore()
    
    // 免登录白名单检查
    if (isWhiteList(to.path)) return
    
    // 认证检查
    if (requiresAuth && !isAuthenticated) {
      return { path: '/login', query: { redirect: to.fullPath } }
    }
    
    // 角色权限检查
    if (roles?.length && !checkRoles(userRoles, roles)) {
      return { path: '/403' }
    }
  })
}

// 路由meta配置
{
  path: '/user/:id',
  component: UserDetail,
  meta: {
    cacheLevel: 2 // 二级缓存
  }
}

// 全局后置守卫
router.afterEach((to, from) => {
  if (from.meta.cacheLevel && to.meta.cacheLevel > from.meta.cacheLevel) {
    // 清除低级别缓存
  }
})

// 主应用路由守卫
router.beforeEach((to) => {
  if (to.path.startsWith('/app1')) {
    window.dispatchEvent(new CustomEvent('main-app-navigation', {
      detail: { path: to.path }
    }))
    return false
  }
})