当前位置：首页 > VUE

addroutes和vue实现权限

2026-01-20 17:01:33VUE

使用 `addRoutes` 和 Vue 实现权限管理

在 Vue 项目中，动态路由和权限管理是常见的需求。addRoutes 是 Vue Router 提供的方法，用于动态添加路由规则。结合权限管理，可以实现根据用户角色或权限动态加载路由。

动态路由的基本概念

动态路由的核心是根据用户的权限动态加载路由表。通常在用户登录后，根据其角色或权限获取对应的路由配置，然后通过 addRoutes 方法将这些路由添加到路由实例中。

实现步骤

定义静态路由和动态路由

静态路由是所有用户都可以访问的路由，如登录页、404 页等。
动态路由是根据用户权限动态加载的路由。

// 静态路由
const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404.vue'),
    hidden: true
  }
];

// 动态路由
const asyncRoutes = [
  {
    path: '/dashboard',
    component: () => import('@/views/dashboard.vue'),
    meta: { roles: ['admin', 'editor'] }
  },
  {
    path: '/user',
    component: () => import('@/views/user.vue'),
    meta: { roles: ['admin'] }
  }
];

路由守卫中检查权限

在全局路由守卫中，检查用户是否有权限访问目标路由。
如果没有权限，可以重定向到登录页或 404 页。

router.beforeEach((to, from, next) => {
  const hasToken = localStorage.getItem('token');
  if (to.path === '/login') {
    next();
  } else if (!hasToken) {
    next('/login');
  } else {
    const roles = localStorage.getItem('roles');
    if (to.meta && to.meta.roles && !to.meta.roles.includes(roles)) {
      next('/404');
    } else {
      next();
    }
  }
});

动态添加路由

在用户登录后，根据其角色或权限获取对应的路由配置。
使用 addRoutes 方法动态添加路由。

import router from './router';

function generateRoutes(roles) {
  let accessedRoutes;
  if (roles.includes('admin')) {
    accessedRoutes = asyncRoutes;
  } else if (roles.includes('editor')) {
    accessedRoutes = asyncRoutes.filter(route => route.meta.roles.includes('editor'));
  }
  router.addRoutes(accessedRoutes);
}

重置路由

在用户退出登录时，需要重置路由，避免路由重复添加。

export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher;
}

注意事项

路由重复添加问题：动态路由可能会被重复添加，导致路由表混乱。需要在添加前重置路由。
404 路由处理：动态路由添加后，404 路由需要放在最后，否则会匹配不到动态路由。
路由持久化：刷新页面后，动态路由会丢失，需要在 vuex 或 localStorage 中保存路由信息。

示例代码

以下是一个完整的示例代码，展示如何在 Vue 项目中实现动态路由和权限管理：

addroutes和vue实现权限

// router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const createRouter = () => new Router({
  routes: constantRoutes
});

const router = createRouter();

export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher;
}

export default router;

// permission.js
import router from './router';
import { resetRouter } from './router';

router.beforeEach(async (to, from, next) => {
  const hasToken = localStorage.getItem('token');
  if (to.path === '/login') {
    next();
  } else if (!hasToken) {
    next('/login');
  } else {
    const roles = localStorage.getItem('roles');
    if (to.meta && to.meta.roles && !to.meta.roles.includes(roles)) {
      next('/404');
    } else {
      next();
    }
  }
});

export async function generateRoutes(roles) {
  let accessedRoutes;
  if (roles.includes('admin')) {
    accessedRoutes = asyncRoutes;
  } else if (roles.includes('editor')) {
    accessedRoutes = asyncRoutes.filter(route => route.meta.roles.includes('editor'));
  }
  resetRouter();
  router.addRoutes(accessedRoutes);
}

通过以上方法，可以实现基于 addRoutes 和 Vue 的动态路由权限管理。