从 0 搭建企业级 Vue3 权限路由与按钮级权限指令深度实践 – JasonCode编程

// src/router/guards.ts
import type  menu.name,
          icon: menu.meta?.icon,
          permission: menu.meta?.permission
         from 'vue-router'
import  from '@/stores/user'
import  from '@/stores/permission'

export function setupRouterGuards(router: Router) {
  router.beforeEach(async (to, from, next) => {
    const userStore = useUserStore()
    const permissionStore = usePermissionStore()

    // 1. 白名单放行（无需登录的页面）
    if (to.meta.requiresAuth === false) {
      return next()
    }

    // 2. 判断是否已登录（是否有 Token）
    if (!userStore.token) {
      return next({ path: " query: { redirect: to.fullPath } })
    }

    // 3. 核心：判断是否已拉取过权限
    // 第一次进入，或者刷新页面时，permissionStore.loaded 为 false
    if (!permissionStore.loaded) {
      try {
        // 拉取用户信息和权限路由，并动态 addRoute
        await permissionStore.fetchPermissions()
        // 关键操作：路由注册完成后，必须使用 replace 重新进入当前路由
        // 否则会出现白屏或者 404
        return next({ ...to, replace: true })
      } catch (error) {
        // 如果获取权限失败（如 Token 过期），清除凭证并踢回登录页
        userStore.clearToken()
        return next("
      }
    }

    // 4. 按钮级权限的细粒度路由校验（可选）
    const requiredPermission = to.meta?.permission as string
    if (requiredPermission && !permissionStore.hasPermission(requiredPermission)) {
      return next('/403')
    }

    next()
  })
}

if (!permissionStore.loaded) {
  try {
    await permissionStore.fetchPermissions()
    // 坑点：千万别写 next()，必须重新触发一次导航，让新挂载的路由生效
    return next({ ...to, replace: true }) 
  } catch (err) {
    // 坑点：这里如果不手动清理 token，死循环绝对跑不掉
    userStore.clearToken()
    return next({ path: " })
  }
}

// src/stores/permission.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'
import router from '@/router'
import type { RouteRecordRaw } from 'vue-router'

export const usePermissionStore = defineStore('permission', () => {
  // 状态
  const loaded = ref(false)
  const permissions = ref([])
  const dynamicRoutes = ref([])

  // 动态导入组件的黑魔法
  const modules = import.meta.glob('@/views/**/*.vue')

  // 将后端菜单转换为 Vue Router 格式
  const transformMenuToRoute = (menus: any[]): RouteRecordRaw[] => {
    return menus.map(menu => {
      const route: RouteRecordRaw = {
        path: menu.path,
        name: menu.name,
        // 核心：通过 glob 映射，避免后端返回字符串导致无法加载组件
        component: modules[`/src/views/${menu.component}.vue`], 
        meta: {
          title: menu.meta?.title || menu.name,
          icon: menu.meta?.icon,
          permission: menu.meta?.permission
        },
        children: menu.children ? transformMenuToRoute(menu.children) : []
      }
      return route
    })
  }

  // 拉取权限并动态挂载
  const fetchPermissions = async () => {
    // 模拟 API 请求
    const res = await api.getPermissions() 
    permissions.value = res.permissions
    dynamicRoutes.value = transformMenuToRoute(res.menus)

    // 关键：将解析后的路由，动态添加到主 Layout 路由下
    dynamicRoutes.value.forEach(route => {
      router.addRoute('Layout', route) 
    })

    loaded.value = true
  }

  const hasPermission = (code: string) => {
    return permissions.value.includes(code)
  }

  return { loaded, permissions, dynamicRoutes, fetchPermissions, hasPermission }
})

// 解决前： modules[`/src/views/${menu.component}.vue`] 容易因为大小写或斜杠报错
// 解决后：加入容错处理，并在路径中强制替换
const modules = import.meta.glob('../../views/**/*.vue')

const getComponent = (componentPath: string) => {
  const path = `../../views/${componentPath}.vue`
  // 如果找不到，就给个 404 占位组件，防止整个应用崩溃
  return modules[path] || (() => import('../../views/error/404.vue'))
}

// src/directives/permission.ts
import { type Directive, type DirectiveBinding } from 'vue'
import { usePermissionStore } from '@/stores/permission'

export const permission: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const { value } = binding
    const permissionStore = usePermissionStore()

    // 支持传入数组，如 v-permission="['user:add', 'user:edit']" (满足其一即可)
    const requiredPermissions = Array.isArray(value) ? value : [value]

    if (requiredPermissions.length > 0) {
      const hasPerm = requiredPermissions.some(perm => permissionStore.hasPermission(perm))

      if (!hasPerm) {
        // 如果没有权限，直接从 DOM 树中移除该元素
        el.parentNode?.removeChild(el)
      }
    } else {
      throw new Error('v-permission 指令需要指定权限编码，如 v-permission="\'user:add\'"')
    }
  }
}

app.directive('permission', permission)