Vue3+Vite实现根据用户权限的动态路由

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...路由配置
  ]
});

router.beforeEach((to) => {
  if (to.name !== 'login') {
    if (!store.state.auth) {
      router.push({ name: 'login' });
      return false;
    }
    if (!store.state.permissions) {
      setPermissions(to.path);
      return false;
    }
    NProgress.start();
  }
});

function setPermissions(routerPath) {
  getPermList({}).then((allPermissions) => {
    // ...权限过滤和路由添加逻辑
  });
}

router.addRoute('Admin', {
  path: permission.perm_router_path,
  name: permission.perm_router_name,
  component: () => import(`../views/${permission.perm_component_path}.vue`)
});

// 引入了状态管理与NProgress进度条
import store from '../store'
import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress'
import { getPermList } from '../axios/apiPermission'

import Admin from '../layout/Admin.vue'
import Index from '../views/Index.vue'
import Setting from '../views/Setting.vue'
import Login from '../views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Admin',
    component: Admin,
    redirect: '/index',
    children: [
      {
        path: '/index',
        name: 'Index',
        component: Index
      },
      {
        path: '/setting',
        name: 'Setting',
        component: Setting
      },
     // ...
    ]
  },
  {
    path: '/:pathMatch(.*)',
    component: Index
  },
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

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

function setPermissions(routerPath) {
  getPermList({})
    .then((allPermissions) => {
      // 从store中获取用户实际拥有的权限
      const userPermissions = store.state.auth.permissions

      // 过滤出用户实际拥有的权限
      const filteredPermissions = allPermissions.filter((permission) => {
        return userPermissions.some((userPerm) => userPerm.perm_id === permission.perm_id)
      })
      store.dispatch('setPermissions', filteredPermissions).then(() => {
        filteredPermissions.forEach((category) => {
          if (category.children && category.children.length > 0) {
            category.children.forEach((permission) => {
              // 根据用户权限动态添加路由
              if (permission.perm_component_path.includes('/')) {
                const parts = permission.perm_component_path.split('/')
                const firstPart = parts[0]
                const secondPart = parts[1]
                router.addRoute('Admin', {
                  path: permission.perm_router_path,
                  name: permission.perm_router_name,
                  component: () => import(`../views/${firstPart}/${secondPart}.vue`)
                })
              } else {
                router.addRoute('Admin', {
                  path: permission.perm_router_path,
                  name: permission.perm_router_name,
                  component: () => import(`../views/${permission.perm_component_path}.vue`)
                })
              }
            })
          }
        })

        router.push({ path: routerPath || '/' })
      })
    })
    .catch((error) => {
      console.error('获取权限错误:', error)
    })
}

NProgress.inc()
NProgress.configure({ showSpinner: false })

router.beforeEach((to) => {
  if (to.name !== 'login') {
    if (!store.state.auth) {
      router.push({ name: 'login' })
      return false
    }
    if (!store.state.permissions) {
      setPermissions(to.path)
      return false
    }
    NProgress.start()
  }
})
router.afterEach(() => {
  NProgress.done()
})

export default router