路由与导航

概述

本文档详细分析邮轮穿舱件管理系统的Vue Router配置，涵盖路由结构、导航守卫和权限控制机制。该系统采用基于角色的权限控制，通过Vuex状态管理实现用户认证状态的全局管理。

路由结构分析

路由配置概览

系统采用Vue Router的单页面应用路由模式，配置了完整的路由结构，包括公共路由、受保护路由和错误处理路由。

flowchart TD
    A[根路径 /] --> B[首页 /home]
    B --> C[工作件管理 /workpiece]
    B --> D[图片管理 /image]
    B --> E[调试页面 /debug]
    B --> F[搜索页面 /search]
    B --> G[文章管理 /article]
    B --> H[审核页面 /audit]
    B --> I[调度管理 /dispatch]
    B --> J[用户管理 /user]
    B --> K[关于页面 /about]
    B --> L[登录页面 /login]
    B --> M[注册页面 /register]
    B --> N[退出登录 /logout]
    B --> O[404页面 *]
    
    I --> P[创建工单 /dispatch/ticket/create]
    I --> Q[编辑工单 /dispatch/ticket/edit/:id]
    I --> R[查看工单 /dispatch/ticket/view/:id]
    
    C --> S[编辑工作件 /workpiece/edit/:id]
    
    style B fill:#e1f5fe
    style L fill:#f3e5f5
    style M fill:#f3e5f5
    style K fill:#f3e5f5
    style O fill:#ffebee

路由分类说明

1. 公共路由（无需认证）

• 登录页面 (/login) - 用户认证入口
• 注册页面 (/register) - 新用户注册
• 关于页面 (/about) - 系统介绍信息
• 404页面 (*) - 错误处理页面

2. 受保护路由（需要认证）

• 工作件管理 (/workpiece) - 核心业务功能
• 图片管理 (/image) - 多媒体资源管理
• 调度管理 (/dispatch) - 工单调度系统
• 用户管理 (/user) - 系统用户管理
• 文章管理 (/article) - 内容管理系统
• 审核页面 (/audit) - 审核流程管理
• 搜索页面 (/search) - 全局搜索功能
• 调试页面 (/debug) - 开发调试工具

3. 动态路由参数

• 工作件编辑 (/workpiece/edit/:id) - 支持ID参数传递
• 工单操作 (/dispatch/ticket/edit/:id, /dispatch/ticket/view/:id) - 工单ID参数

路由配置详情表

路径	名称	组件	认证要求	参数	说明
/	Index	重定向	默认	无	根路径重定向到首页
/home	Home	HomeView	需要	无	系统首页
/workpiece	Workpiece	WorkpieceView	需要	无	工作件列表
/workpiece/edit/:id	WorkpieceEdit	WorkpieceEdit	需要	id	工作件编辑
/image	Image	ImageView	需要	无	图片管理
/debug	Debug	DebugView	需要	无	调试工具
/search	Search	SearchView	需要	无	搜索功能
/article	Article	ArticleView	需要	无	文章管理
/audit	Audit	AuditView	需要	无	审核管理
/dispatch	DispatchData	DispatchDataView	需要	无	调度数据
/dispatch/ticket/create	TicketCreate	TicketEditView	需要	mode=create	创建工单
/dispatch/ticket/edit/:id	TicketEdit	TicketEditView	需要	id	编辑工单
/dispatch/ticket/view/:id	TicketView	TicketEditView	需要	id	查看工单
/user	User	UserAdmin	需要	无	用户管理
/login	Login	LoginView	无需	无	用户登录
/about	About	AboutView	无需	无	关于页面
/logout	Logout	LogoutView	需要	无	退出登录
/register	Register	RegisterView	无需	无	用户注册
*	NotFound	NotFoundView	无需	无	404页面

导航守卫机制

全局前置守卫 (beforeEach)

系统实现了完整的导航守卫机制，通过全局前置守卫进行权限验证。

sequenceDiagram
    participant U as 用户导航
    participant R as Router
    participant S as Store
    participant L as Login页面
    
    U->>R: 发起路由跳转
    R->>R: 检查开发模式
    alt 开发模式
        R->>R: 跳过认证检查
        R->>U: 直接放行
    else 生产模式
        R->>R: 分析路由meta信息
        R->>S: 获取认证状态(store.state.authenticated)
        S-->>R: 返回认证状态
        alt 需要认证且未认证
            R->>L: 重定向到登录页
            L-->>U: 显示登录界面
        else 已认证或无需认证
            R->>U: 正常跳转
        end
    end

守卫实现逻辑

router.beforeEach((to, from, next) => {
  // 开发模式跳过认证检查
  const isDebugMode = process.env.NODE_ENV === 'development';
  if (isDebugMode) {
    console.log('Debug mode: skipping authentication check');
    next();
    return;
  }

  // 生产模式进行认证检查
  const requiresAuth = to.matched.some(record => {
    const meta = record.meta || {};
    return Boolean(meta.requiresAuth);
  });
  
  const isAuthenticated = store.state.authenticated;

  if (requiresAuth && !isAuthenticated) {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    });
  } else {
    next();
  }
});

路由重复导航处理

系统对Vue Router的原生方法进行了重写，解决了重复导航的问题：

// 重写push方法处理重复导航
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') throw err;
  });
};

// 重写replace方法处理重复导航
const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') throw err;
  });
};

权限控制机制

Vuex状态管理

系统使用Vuex进行全局状态管理，存储用户认证相关信息：

classDiagram
    class VuexStore {
        +state: Object
        +mutations: Object
        +actions: Object
        +getters: Object
    }
    
    class StoreState {
        +navigator_drawer: Boolean
        +authenticated: Boolean
        +user_info: Object
        +user_token: String
    }
    
    class StoreMutations {
        +set_user_info(value)
        +set_user_token(value)
        +set_navigator_drawer(value)
        +set_authenticated(value)
        +toggle_navigator_drawer()
    }
    
    class StoreActions {
        +set_user_info(value)
        +set_user_token(value)
        +set_navigator_drawer(value)
        +set_authenticated(value)
        +toggle_navigator_drawer()
    }
    
    class StoreGetters {
        +get_navigator_drawer()
        +get_authenticated()
        +get_user_info()
        +get_user_token()
    }
    
    VuexStore --> StoreState
    VuexStore --> StoreMutations
    VuexStore --> StoreActions
    VuexStore --> StoreGetters

认证状态流转

stateDiagram-v2
    [*] --> 未认证
    未认证 --> 已认证 : 登录成功
    已认证 --> 未认证 : 退出登录
    已认证 --> 已认证 : 页面跳转(认证检查)
    未认证 --> 未认证 : 访问公共页面
    
    state 未认证 {
        [*] --> 登录页面
        登录页面 --> 认证中 : 提交凭证
        认证中 --> 登录页面 : 认证失败
        认证中 --> [*] : 认证成功
    }
    
    state 已认证 {
        [*] --> 首页
        首页 --> 功能页面 : 导航
        功能页面 --> 首页 : 返回
        功能页面 --> 退出确认 : 退出操作
        退出确认 --> [*] : 确认退出
    }

权限控制流程

1. 路由访问请求：用户尝试访问受保护路由
2. 守卫拦截：全局前置守卫检查路由meta信息
3. 状态验证：查询Vuex store中的认证状态
4. 决策处理：
   • 已认证：允许访问目标路由
   • 未认证：重定向到登录页面，携带原目标路径参数
5. 登录后重定向：登录成功后自动跳转回原目标页面

架构特点与设计模式

1. 路由懒加载

所有路由组件都使用动态导入，实现代码分割和懒加载优化：

component: () => import('@/views/HomeView.vue')

2. 参数传递机制

• Props传参：通过props: true将路由参数传递给组件
• 模式参数：通过props: { mode: 'create' }传递静态参数

3. 错误处理

• 404处理：通配符路由捕获所有未定义路径
• 重复导航：重写导航方法避免控制台错误

4. 开发体验优化

• 开发模式：开发环境下跳过认证检查，方便调试
• 历史模式：使用HTML5 History模式，URL更友好

性能优化建议

1. 路由分组：可以考虑按功能模块进行路由分组，进一步优化代码分割
2. 权限粒度：当前为二元权限控制，可扩展为基于角色的细粒度权限
3. 路由预加载：对常用路由实现预加载策略，提升用户体验

参考文件

• router/index.js
• store/index.js

索引

邮轮穿舱件管理系统的路由架构采用了标准的Vue Router实现，结合Vuex状态管理实现了完整的权限控制机制。系统通过全局导航守卫、路由懒加载、参数传递等特性，构建了高效、安全的前端路由系统。该架构具有良好的可扩展性和维护性，为系统的功能扩展提供了坚实的基础。