企业级后台实战（下）：Vue 3 权限系统与动态路由深度解析

用户 User
  -> 角色 Role
    -> 菜单权限 Menu Permission
    -> 按钮权限 Action Permission

interface UserInfo {
  id: number
  username: string
  roles: string[]
  permissions: string[]
}

const userInfo: UserInfo = {
  id: 1,
  username: 'admin',
  roles: ['admin'],
  permissions: [
    'dashboard:view',
    'user:list',
    'user:create',
    'user:update',
    'user:delete'
  ]
}

import { defineStore } from 'pinia'
import { ref } from 'vue'

interface UserInfo {
  id: number
  username: string
  roles: string[]
  permissions: string[]
}

export const useUserStore = defineStore('user', () => {
  // token 刷新后优先从本地缓存恢复
  const token = ref(localStorage.getItem('token') || '')
  const userInfo = ref<UserInfo | null>(null)

  function setToken(value: string) {
    token.value = value
    localStorage.setItem('token', value)
  }

  function clearAuth() {
    token.value = ''
    userInfo.value = null
    localStorage.removeItem('token')
  }

  async function getUserInfo() {
    // 真实项目里通常在这里请求用户角色和权限
    // 这里请求后端获取用户信息
    userInfo.value = {
      id: 1,
      username: 'admin',
      roles: ['admin'],
      permissions: ['dashboard:view', 'user:list', 'user:create']
    }
  }

  return {
    token,
    userInfo,
    setToken,
    clearAuth,
    getUserInfo
  }
})

interface RouteMeta {
  title?: string
  icon?: string
  hidden?: boolean
  requiresAuth?: boolean
  roles?: string[]
  permission?: string
  keepAlive?: boolean
}

import type { RouteRecordRaw } from 'vue-router'

export const asyncRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('@/layout/index.vue'),
    redirect: '/dashboard',
    meta: { requiresAuth: true },
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index.vue'),
        meta: {
          title: '工作台',
          icon: 'Odometer',
          permission: 'dashboard:view',
          keepAlive: true
        }
      },
      {
        path: 'users',
        name: 'UserList',
        component: () => import('@/views/users/index.vue'),
        meta: {
          title: '用户管理',
          icon: 'User',
          permission: 'user:list'
        }
      }
    ]
  }
]

import router from './router'
import { useUserStore } from '@/stores/user'
import { usePermissionStore } from '@/stores/permission'

const whiteList = ['/login']

router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()
  const permissionStore = usePermissionStore()

  if (userStore.token) {
    if (to.path === '/login') {
      next('/')
      return
    }

    if (!userStore.userInfo) {
      try {
        // 先恢复用户信息，再生成动态路由
        await userStore.getUserInfo()
        await permissionStore.generateRoutes(userStore.userInfo.permissions)
        permissionStore.dynamicRoutes.forEach((route) => {
          router.addRoute(route)
        })
        // 用 replace 重新进入目标页，确保新路由生效
        next({ ...to, replace: true })
      } catch (error) {
        userStore.clearAuth()
        next('/login')
      }
      return
    }

    next()
    return
  }

  if (whiteList.includes(to.path)) {
    next()
  } else {
    next('/login')
  }
})

function hasPermission(route: RouteRecordRaw, permissions: string[]) {
  const permission = route.meta?.permission

  if (!permission) {
    return true
  }

  return permissions.includes(permission)
}

function filterAsyncRoutes(
  routes: RouteRecordRaw[],
  permissions: string[]
): RouteRecordRaw[] {
  return routes
    // 先过滤掉当前层级无权限的路由
    .filter((route) => hasPermission(route, permissions))
    .map((route) => {
      const currentRoute = { ...route }

      if (currentRoute.children) {
        // 子路由也要继续递归过滤
        currentRoute.children = filterAsyncRoutes(currentRoute.children, permissions)
      }

      return currentRoute
    })
}

import { defineStore } from 'pinia'
import { ref } from 'vue'
import { asyncRoutes } from '@/router/async-routes'

export const usePermissionStore = defineStore('permission', () => {
  const dynamicRoutes = ref<RouteRecordRaw[]>([])

  async function generateRoutes(permissions: string[]) {
    dynamicRoutes.value = filterAsyncRoutes(asyncRoutes, permissions)
  }

  return {
    dynamicRoutes,
    generateRoutes
  }
})

[
  {
    "path": "/users",
    "name": "UserList",
    "component": "users/index",
    "meta": {
      "title": "用户管理",
      "permission": "user:list"
    }
  }
]

const viewModules = import.meta.glob('@/views/**/*.vue')

function resolveView(component: string) {
  return viewModules[`/src/views/${component}.vue`]
}

<template>
  <el-menu :default-active="$route.path" router>
    <template v-for="route in menuRoutes" :key="route.path">
      <el-menu-item
        v-if="!route.meta?.hidden"
        :index="route.path"
      >
        <span>{{ route.meta?.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

const menuRoutes = computed(() => permissionStore.dynamicRoutes)

<el-button
  v-if="userStore.userInfo?.permissions.includes('user:create')"
  type="primary"
>
  新增用户
</el-button>

import { computed } from 'vue'
import { useUserStore } from '@/stores/user'

export function usePermission(permission: string) {
  const userStore = useUserStore()

  const hasPermission = computed(() => {
    // 根据当前用户权限码判断是否可操作
    return userStore.userInfo?.permissions.includes(permission) ?? false
  })

  return {
    hasPermission
  }
}

const { hasPermission } = usePermission('user:delete')

<el-button v-if="hasPermission" type="danger">删除</el-button>

import type { Directive } from 'vue'
import { useUserStore } from '@/stores/user'

export const permissionDirective: Directive = {
  mounted(el, binding) {
    const userStore = useUserStore()
    const permission = binding.value
    const hasPermission = userStore.userInfo?.permissions.includes(permission)

    if (!hasPermission) {
      // 没有权限时，直接移除对应按钮节点
      el.parentNode?.removeChild(el)
    }
  }
}

<el-button v-permission="'user:delete'" type="danger">
  删除
</el-button>

if (!userStore.userInfo) {
  await userStore.getUserInfo()
  await permissionStore.generateRoutes(userStore.userInfo.permissions)
}

src/
  ├── api/
  │   └── user.ts              # 登录、获取用户信息
  ├── router/
  │   ├── index.ts             # 静态路由、守卫注册
  │   ├── async-routes.ts      # 需要按权限过滤的异步路由
  │   └── permission.ts        # 路由过滤工具函数
  ├── stores/
  │   ├── user.ts              # token、用户信息
  │   └── permission.ts        # 动态路由、菜单状态
  ├── directives/
  │   └── permission.ts        # v-permission 指令
  ├── composables/
  │   └── usePermission.ts     # 权限判断组合式函数
  └── layout/
      └── index.vue            # 动态菜单布局