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

通过以上步骤，可以实现基于用户权限的动态路由加载，确保前端路由与用户权限的实时同步。