当前位置：首页 > news >正文

实现基于Vue的后台管理系统权限控制与动态路由

news 来源：原创 2025/6/10 4:41:05

在开发后台管理系统时，权限控制是不可或缺的一部分。本文将详细介绍如何使用Vue实现根据不同角色动态生成路由，从而控制用户访问权限。

步骤一：基础路由配置

首先，我们需要配置基础路由，这些路由是所有用户共有的，例如登录页和404页。

const allRoutes = [
  // 基础路由
  {
    path: '/',
    name: 'login',
    component: () => import("@/views/LoginView.vue")
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/Error/404View.vue')
  },
  // 动态路由容器（登录后内容）
  {
    path: '/layout',
    name: 'layout',
    component: () => import('@/Layout/MainLayout.vue'),
    children: []
  },
]

步骤二：完整路由数据

接下来，创建一个包含所有可能路由的数组。这个数组将用于与后端返回的权限数据对比，以筛选出当前用户有权访问的路由。

// 所有路由
const totalRoute = [
  {
    path: '/',
    name: 'login',
    component: () => import("@/views/LoginView.vue")
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/Error/404View.vue')
  },
  {
    path: '/layout',
    name: 'layout',
    component: () => import('@/Layout/MainLayout.vue'),
  },
  {
    path: '/home',
    name: '首页',
    id: 1,
    pid: 0,
  },
  {
    id: 2,
    pid: 0,
    redirect: null,
    path: '/comp',
    name: '门诊',
    children: [{
      id: 3,
      pid: 2,
      redirect: null,
      component: () => import('@/views/payView.vue'),
      path: "/pay",
      name: "门诊缴费记录",
    },{
      id: 4,
      pid: 2,
      redirect: null,
      component: () => import('@/views/reservationView.vue'),
      path: "/reservation",
      name: "预约记录",
    }]
  },
  { 
    id: 8,
    pid: 0,
    path: '/hospital',
    name: '住院',
    children: [{
      id: 9,
      pid: 8,
      redirect: null,
      component: () => import('@/views/hospitalView.vue'),
      path: "/hospitalpay",
      name: "住院缴费记录",
    },{
      id: 10,
      pid: 8,
      redirect: null,
      component: () => import('@/views/roomView.vue'),
      path: "/room",
      name: "房间管理",
    },{
      id: 11,
      pid: 8,
      redirect: null,
      component: () => import('@/views/inpatientView.vue'),
      path: "/inpatient",
      name: "住院人",
    }]
  }
];

步骤三：模拟后端权限数据

为了演示，我们使用模拟数据来代表后端返回的权限信息。

然后是后端接口返回的数据，我就先用假数据进行代替了。配置的基础路由和假数据要一致就行。假数据就是动态路由（会发生改变的）

// 动态访问
const dynamicRouteConfigs = [
  // 动态路由容器（登录后内容）
  {
    path: '/home',
    name: '首页',
    id: 1,
    pid: 0,
  },
  {
    id: 2,
    pid: 0,
    redirect: null,
    path: '/comp',
    name: '门诊',
    children: [{
      id: 3,
      pid: 2,
      redirect: null,
      path: "/pay",
      name: "门诊缴费记录",
    },{
      id: 4,
      pid: 2,
      redirect: null,
      path: "/reservation",
      name: "预约记录",
    }]
  },
  { 
    id: 8,
    pid: 0,
    path: '/hospital',
    name: '住院',
    children: [{
      id: 9,
      pid: 8,
      redirect: null,
      path: "/hospitalpay",
      name: "住院缴费记录",
    },{
      id: 10,
      pid: 8,
      redirect: null,
      path: "/room",
      name: "房间管理",
    },{
      id: 11,
      pid: 8,
      redirect: null,
      path: "/inpatient",
      name: "住院人",
    }]
  },
  {
    id: 12,
    pid: 0,
    redirect: null,
    path: '/userinfor',
    name: '用户管理',
    children: [{
      id: 13,
      pid: 12,
      redirect: null,
      path: "/user",
      name: "用户管理",
    },{
      id: 14,
      pid: 12,
      redirect: null,
      path: "/role",
      name: "角色管理",
    },{
      id: 15,
      pid: 12,
      redirect: null,
      path: "/admin",
      name: "管理员管理",
    },{
      id: 27,
      pid: 12,
      redirect: null,
      path: "/visit",
      name: "就诊卡",
    }]
  },
  {
    id: 16,
    pid: 0,
    path: '/department',
    name: '科室管理',
    children: [{
      id: 24,
      pid: 16,
      redirect: null,
      path: "/departments",
      name: "科室管理",
    }]
  },
  {
    id: 17,
    pid: 0,
    path: '/hospitals',
    name: '医院信息',
    redirect: null,
    children: [{
      id: 18,
      pid: 17,
      redirect: null,
      path: "/hospitalList",
      name: "医院信息",
    },{
      id: 19,
      pid: 17,
      redirect: null,
      path: "/doctor",
      name: "医生管理",
    },{
      id: 20,
      pid: 17,
      redirect: null,
      path: "/scheduling",
      name: "医生排班管理",
    },{
      id: 21,
      pid: 17,
      redirect: null,
      path: "/label",
      name: "标签管理",
    },{
      id: 22,
      pid: 17,
      redirect: null,
      path: "/drug",
      name: "药品管理",
    },
    {
      id: 23,
      pid: 17,
      redirect: null,
      path: "/physical",
      name: "体检管理",
    },{
      id: 26,
      pid: 17,
      redirect: null,
      path: "/trends",
      name: "医院动态",
    }]
  }
];

步骤四：创建路由实例

使用Vue Router创建路由实例，并初始化注册基础路由。

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: allRoutes
})

步骤五：筛选匹配路由

编写一个函数来筛选出匹配的路由。这个函数将遍历后端返回的权限数据和完整路由数据，找出匹配的路由并添加组件。

然后就进行改变判断，通过遍历两个数组，判断两者的name或者path相同的时候将其放入一个新数组中。
然后再声明一个变量等于component，就是添加基础路由的component组件

const filterRoutes = (dynamicRouteConfigs, totalRoute) => {
  // 打印动态路由配置
  console.log('动态路由', dynamicRouteConfigs);
  // 打印总路由
  console.log('基础路由', totalRoute);
  // 定义一个递归函数findMatchedRoute，用于在路由数组中查找匹配的目标路由
  const findMatchedRoute = (routes, target) => {
    // 遍历路由数组
    for (const route of routes) {
      // 如果路由名称在排除列表中，则跳过
      if (['404', 'home'].includes(route.name)) continue;
      // 如果路由名称或路径与目标匹配，则返回该路由
      if (route.name === target.name || route.path === target.path) {
        return route;
      }
      // 如果当前路由有子路由，则递归查找匹配的子路由
      if (route.children) {
        const matchedChild = findMatchedRoute(route.children, target);
        // 如果找到匹配的子路由，则返回
        if (matchedChild) return matchedChild;
      }
    }
    // 如果没有找到匹配的路由，则返回null
    return null;
  };
  // 定义一个函数mergeRoutes，用于合并源路由和匹配的路由
  const mergeRoutes = (source, target) => {
    // 返回一个新的路由对象，包含源路由的所有属性，以及匹配路由的component属性
    return {
      ...source,
      component: target.component,
      // 如果源路由有子路由，则递归合并子路由
      children: source.children ? source.children.map(child => mergeRoutes(child, findMatchedRoute([target], child) || {})) : undefined,
      // 可以在这里合并其他可能需要的内容，例如meta属性
    };
  };
  // 映射动态路由配置，对每个路由进行匹配和合并操作
  const result = dynamicRouteConfigs
    .map(route => {
      // 查找匹配的路由
      const matchedRoute = findMatchedRoute(totalRoute, route);
      // 打印匹配的路由
      console.log(matchedRoute);
      // 如果找到匹配的路由，则合并路由，否则返回null
      return matchedRoute 
        ? mergeRoutes(route, matchedRoute)
        : null;
    })
    // 过滤掉结果中的null值
    .filter(route => route !== null);
  // 打印过滤后的路由数组
  console.log('过滤后的路由数组:', result);
  // 返回过滤后的路由数组
  return result;
};

步骤六：动态添加路由

编写一个函数来动态添加筛选后的路由到基础路由的layout容器中。

然后后台控制路由就完成了。主要和起那段控制是一样的，都是需要一个基础的路由数组，然后我们将数组对比过滤过之后，需要把过滤好的数组添加注册到路由中。逻辑都是一样的，疏通逻辑就可以了。

只不过前后端控制路由的接口返回不一样而已。

// 动态添加路由到layout
const addDynamicRoutes = (roles) => {
  // 清空已有动态路由
  const layout = router.getRoutes().find(r => r.name === 'layout')
  layout.children.forEach(child => {
    router.removeRoute(child.name)
  })
  // 过滤并添加新路由
  const allowedRoutes = filterRoutes(dynamicRouteConfigs, allRoutes); 
  allowedRoutes.forEach(route => { router.addRoute('layout', route); });
  console.log(allowedRoutes);
  sessionStorage.setItem('menuPath',JSON.stringify(allowedRoutes));//存储的筛选过的动态路由
  // 确保404最后处理
  router.addRoute({ 
    path: '/:pathMatch(.*)*',
    redirect: '/404'
  })
}

步骤七：存储和渲染菜单

将筛选后的路由存储在会话存储中，并在菜单页面进行渲染。

通过以上步骤，我们完成了基于Vue的后台管理系统权限控制与动态路由的设置。不同角色的用户将看到不同的菜单和页面，实现了权限的精细化管理。

最后路由导航守卫加上去就ok了。

// 路由守卫修改部分（router/index.ts）
router.beforeEach(async (to, from, next) => {
  const store = loginStore()
  const isLogin = !!store.id
  // 未登录状态处理
  if (!isLogin) {
    return to.path === '/' ? next() : next('/')
  }
  // 已登录但访问登录页时重定向
  if (to.path === '/') {
    return next('/home')
  }
  // 动态路由加载逻辑
  if (!store.routesLoaded) {
    try {
      // 直接从store获取已保存的角色信息
      const userRoles = store.roles;
      // 如果角色信息不存在则抛出错误
      if (!userRoles || userRoles.length === 0) {
        throw new Error('用户角色信息未获取')
      }
      // 添加动态路由
      addDynamicRoutes(dynamicRouteConfigs)
      // 在添加路由后打印
      console.log('当前所有路由:', router.getRoutes().map(r => r.path))
      // 更新加载状态
      store.setRoutesLoaded(true)
      // 使用replace方式跳转避免重复记录历史
      return next({ ...to, replace: true })
    } catch (error) {
      console.error('路由加载失败:', error)
      // 清除用户状态并跳转登录页
      store.$reset()
      return next('/')
    }
  }
  next();
})

总结：

本文介绍了如何使用Vue和Vue Router实现后台管理系统的权限控制。通过动态生成路由，我们可以根据用户的角色灵活控制页面访问权限，提高系统的安全性和用户体验。