Vue3+Vite实现根据用户权限的动态路由
作者：凉柚ˇ
在现代前端开发中，单页面应用（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
到此这篇关于Vue3+Vite实现根据用户权限的动态路由的文章就介绍到这了,更多相关Vue3动态路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！