vue实现权限动态路由
Vue 实现权限动态路由的方法
初始化路由配置
在 Vue 项目中，通常有一个基础路由文件（如 router/index.js），定义所有可能的路由路径。初始时只配置无需权限的公共路由（如登录页、404 页）。
const routes = [
{
path: '/login',
component: () => import('@/views/Login.vue')
},
{
path: '/404',
component: () => import('@/views/404.vue')
}
];获取用户权限信息
用户登录后，从后端接口获取当前用户的权限标识（如角色或权限码）。权限信息通常以数组或树形结构返回。
// 示例：假设接口返回用户权限列表
const userPermissions = ['admin', 'editor'];过滤动态路由
根据权限标识过滤出用户有权访问的路由。可以通过路由配置的 meta 字段标记权限要求。
// 定义所有动态路由（需权限访问）
const dynamicRoutes = [
{
path: '/dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { requiresAuth: true, permissions: ['admin'] }
},
{
path: '/article',
component: () => import('@/views/Article.vue'),
meta: { requiresAuth: true, permissions: ['editor'] }
}
];
// 过滤出用户有权限的路由
const allowedRoutes = dynamicRoutes.filter(route => {
return route.meta.permissions.some(perm => userPermissions.includes(perm));
});动态添加路由
使用 Vue Router 的 addRoutes 方法（Vue Router 3.x）或 addRoute 方法（Vue Router 4.x）将过滤后的路由添加到路由实例。
// Vue Router 3.x
router.addRoutes(allowedRoutes);
// Vue Router 4.x
allowedRoutes.forEach(route => router.addRoute(route));路由守卫处理
在全局路由守卫中检查权限，拦截未授权访问。
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
const userHasPermission = to.matched.some(record => {
return record.meta.permissions?.some(perm => userPermissions.includes(perm));
});
if (requiresAuth && !userHasPermission) {
next('/login'); // 或跳转到 403 页面
} else {
next();
}
});存储权限状态
将权限信息存储在 Vuex 或 Pinia 中，避免每次路由跳转时重复请求接口。
// Vuex 示例
state: {
permissions: []
},
mutations: {
setPermissions(state, payload) {
state.permissions = payload;
}
}处理页面刷新
在应用初始化时（如 App.vue 的 created 钩子），重新获取权限并动态加载路由。
created() {
this.$store.dispatch('fetchUserPermissions').then(permissions => {
// 重新过滤并添加路由
filterAndAddRoutes(permissions);
});
}404 路由处理
动态路由加载后，需手动添加 404 路由的捕获规则，确保未匹配路径的正确跳转。
router.addRoute({ path: '*', redirect: '/404' });通过以上步骤，可以实现基于用户权限的动态路由加载，确保前端路由与用户权限的实时同步。
