vue根据用户权限动态路由的实现

在现代前端开发中，单页面应用（SPA）越来越受到开发者的青睐，而 Vue.js 作为其中的一个流行框架，提供了丰富的功能来构建用户界面。特别是 Vue 3 的发布，带来了更多的性能优化和新特性。在构建企业级应用时，动态路由是一个不可或缺的功能，它允许应用根据用户权限动态地加载和显示页面。本文将通过一个基于 Vite + Vue 3 的项目示例，详细介绍如何实现动态路由。

首先，确保你已经安装了Node.js和npm（或 yarn）。然后使用Vite创建一个新的Vue 3项目：

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

然后我们需要进行动态路由的基础配置。

在Vue 3中，我们可以使用createRouter和createWebHistory（或createMemoryHistory）来创建路由配置。以下是一个基本的路由配置示例：

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

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

接下来，我们需要进行权限控制，这是动态路由实现的关键。通常，后端会提供一个权限列表，前端根据这些信息动态地添加或删除路由。

在提供的代码中，我们可以看到几个关键点：

• 路由配置数组(routes)：定义了应用的基础路由结构。
• 路由守卫(router.beforeEach)：在路由跳转前进行权限检查。
• 动态路由添加(setPermissions函数)：根据用户权限动态添加路由。

路由守卫是Vue Router的一个强大功能，可以在路由跳转前后执行代码。在本例中，我们使用了beforeEach守卫来检查用户是否登录，以及是否具有相应的权限。

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();
  }
});

setPermissions函数是动态路由实现的核心。它首先从后端获取所有权限列表，然后与用户实际拥有的权限进行匹配，最后动态地添加路由。

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

在动态路由中，异步组件的使用可以提高应用的性能。Vue支持使用import()函数来定义异步组件，这允许我们在需要时才加载组件。

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

在实际开发中，还有一些注意事项需要注意：

• 确保后端接口正确返回权限数据。
• 动态路由的添加应该在应用启动后尽快完成，避免用户在没有权限的页面上等待。
• 考虑使用Vuex或其他状态管理库来管理用户状态和权限。

通过本文的介绍，你应该对如何在Vue 3 + Vite项目中实现动态路由有了更深入的理解。动态路由是一个复杂但非常有用的功能，合理使用可以大大提升应用的安全性和用户体验。希望本文对你有所帮助！

完整代码示例

// 引入了状态管理与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