路由配置与访问控制

router/index.ts 定义了煤热解仿真系统的空间拓扑结构。它通过 三层 Layout 架构 实现了业务场景的隔离，并利用 Vue Router 的导航守卫建立了管理员与普通用户之间的安全防线。

🗺 路由架构设计

系统采用“嵌套路由”方案，根据业务职能将应用划分为：主模拟区、离线分析区和管理后台。

✨ 架构特性
💻 源码逻辑分析

核心特性分析

多布局 (Multi-Layout) 隔离

根据 URL 前缀自动匹配 MainLayout（仿真）、AnalyzeLayout（分析）或 AdminLayout（后台）。

按需加载 (Lazy Loading)

通过 () => import() 语法实现组件分包。仅在用户访问对应路径时才加载组件代码，极大优化了首屏加载性能。

管理员路由守卫

在 /admin 路径执行 beforeEnter 钩子，从持久化存储中校验用户的 is_admin 权限。

默认语义化重定向

当访问根路径 / 时，系统会自动重定向至 /simulation，确保用户始终处于有效的工作界面。

导航生命周期

路径解析：Vue Router 监听 URL 变化并匹配路由表。
钩子检查：如果是管理员路径，执行权限前置检查。
布局挂载：渲染对应的顶层 Layout 组件（包含公共导航或侧边栏）。
异步载入：后台发起 HTTP 请求获取对应业务组件的 JavaScript 包。
视图更新：在 <router-view /> 插槽中填充业务内容。

关键逻辑实现

/**
 * @description 管理员路由权限校验
 * @access 仅限 is_admin 标记为 true 的用户
 */
beforeEnter: (to, from, next) => {
  const rawData = localStorage.getItem('cpd_user_info');
  if (!rawData) return next('/'); // 未登录则强制打回首页

  try {
    const userInfo = JSON.parse(rawData);
    // 兼容处理：支持布尔值或字符串形式的权限标记
    const isAdmin = userInfo?.is_admin === true || userInfo?.is_admin === 'true';
    isAdmin ? next() : next('/'); // 非管理员无权访问后台
  } catch (e) {
    next('/');
  }
}

2. 路由分组定义

const routes = [
  {
    path: '/',
    component: MainLayout, // 包含顶栏导航的布局
    children: [
      { path: 'simulation', component: () => import('../components/CoalSimPanel.vue') },
      { path: 'nmr-prediction', component: () => import('../components/CoalNmrPredictionPanel.vue') }
    ]
  },
  {
    path: '/tools',
    component: AnalyzeLayout, // 工具类布局，适配 XRD 等全屏分析场景
    children: [
      { path: 'xrd', component: () => import('../components/tools/XRD.vue') }
    ]
  }
];

🛠 路由地图对照表

访问路径	映射组件	对应布局	权限级别
`/`	`CoalSimPanel`	`MainLayout`	游客/普通用户
`/nmr-prediction`	`CoalNmrPredictionPanel`	`MainLayout`	游客/普通用户
`/tools/xrd`	`XRD`	`AnalyzeLayout`	游客/普通用户
`/admin`	`AdminLayout`	`AdminLayout`	管理员 (is_admin)