快捷導(dǎo)航

Vue3+Vite實現(xiàn)根據(jù)用戶權(quán)限的動態(tài)路由

更新時間：2025年10月23日 09:58:16 作者：涼柚ˇ

在現(xiàn)代前端開發(fā)中,單頁面應(yīng)用（SPA）越來越受到開發(fā)者的青睞,而 Vue.js 作為其中的一個流行框架,提供了豐富的功能來構(gòu)建用戶界面,本文將通過一個基于 Vite + Vue 3 的項目示例,詳細(xì)介紹如何實現(xiàn)動態(tài)路由,有需要的可以參考下

在現(xiàn)代前端開發(fā)中，單頁面應(yīng)用（SPA）越來越受到開發(fā)者的青睞，而 Vue.js 作為其中的一個流行框架，提供了豐富的功能來構(gòu)建用戶界面。特別是 Vue 3 的發(fā)布，帶來了更多的性能優(yōu)化和新特性。在構(gòu)建企業(yè)級應(yīng)用時，動態(tài)路由是一個不可或缺的功能，它允許應(yīng)用根據(jù)用戶權(quán)限動態(tài)地加載和顯示頁面。本文將通過一個基于 Vite + Vue 3 的項目示例，詳細(xì)介紹如何實現(xiàn)動態(tài)路由。

首先，確保你已經(jīng)安裝了Node.js和npm（或 yarn）。然后使用Vite創(chuàng)建一個新的Vue 3項目：

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

然后我們需要進(jìn)行動態(tài)路由的基礎(chǔ)配置。

在Vue 3中，我們可以使用createRouter和createWebHistory（或createMemoryHistory）來創(chuàng)建路由配置。以下是一個基本的路由配置示例：

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

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

接下來，我們需要進(jìn)行權(quán)限控制，這是動態(tài)路由實現(xiàn)的關(guān)鍵。通常，后端會提供一個權(quán)限列表，前端根據(jù)這些信息動態(tài)地添加或刪除路由。

在提供的代碼中，我們可以看到幾個關(guān)鍵點：

路由配置數(shù)組(routes)：定義了應(yīng)用的基礎(chǔ)路由結(jié)構(gòu)。
路由守衛(wèi)(router.beforeEach)：在路由跳轉(zhuǎn)前進(jìn)行權(quán)限檢查。
動態(tài)路由添加(setPermissions函數(shù))：根據(jù)用戶權(quán)限動態(tài)添加路由。

路由守衛(wèi)是Vue Router的一個強(qiáng)大功能，可以在路由跳轉(zhuǎn)前后執(zhí)行代碼。在本例中，我們使用了beforeEach守衛(wèi)來檢查用戶是否登錄，以及是否具有相應(yīng)的權(quán)限。

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函數(shù)是動態(tài)路由實現(xiàn)的核心。它首先從后端獲取所有權(quán)限列表，然后與用戶實際擁有的權(quán)限進(jìn)行匹配，最后動態(tài)地添加路由。

function setPermissions(routerPath) {
  getPermList({}).then((allPermissions) => {
    // ...權(quán)限過濾和路由添加邏輯
  });
}

在動態(tài)路由中，異步組件的使用可以提高應(yīng)用的性能。Vue支持使用import()函數(shù)來定義異步組件，這允許我們在需要時才加載組件。

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

在實際開發(fā)中，還有一些注意事項需要注意：

確保后端接口正確返回權(quán)限數(shù)據(jù)。
動態(tài)路由的添加應(yīng)該在應(yīng)用啟動后盡快完成，避免用戶在沒有權(quán)限的頁面上等待。
考慮使用Vuex或其他狀態(tài)管理庫來管理用戶狀態(tài)和權(quán)限。

通過本文的介紹，你應(yīng)該對如何在Vue 3 + Vite項目中實現(xiàn)動態(tài)路由有了更深入的理解。動態(tài)路由是一個復(fù)雜但非常有用的功能，合理使用可以大大提升應(yīng)用的安全性和用戶體驗。希望本文對你有所幫助！

完整代碼示例

// 引入了狀態(tài)管理與NProgress進(jìn)度條
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中獲取用戶實際擁有的權(quán)限
      const userPermissions = store.state.auth.permissions

      // 過濾出用戶實際擁有的權(quán)限
      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) => {
              // 根據(jù)用戶權(quán)限動態(tài)添加路由
              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('獲取權(quán)限錯誤:', 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

到此這篇關(guān)于Vue3+Vite實現(xiàn)根據(jù)用戶權(quán)限的動態(tài)路由的文章就介紹到這了,更多相關(guān)Vue3動態(tài)路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: