邮轮穿舱件管理系统 - 故障排除指南

概述

本文档为邮轮穿舱件管理系统的前端项目提供全面的故障排除指南，基于对项目代码结构的深入分析，涵盖常见问题解决方案、错误排查指南和调试技巧。

项目架构分析

技术栈依赖关系

flowchart TD
    A[Vue.js 2.6.14] --> B[Vue Router 3.6.5]
    A --> C[Vuex 3.6.2]
    A --> D[Vuetify 2.6.0]
    A --> E[Axios 1.7.5]
    
    B --> F[路由守卫]
    C --> G[状态管理]
    D --> H[UI组件]
    E --> I[HTTP请求]
    
    F --> J[认证检查]
    G --> K[用户状态]
    I --> L[Token管理]
    
    style A fill:#f9f
    style D fill:#bbf

技术栈说明：

• Vue.js 2.6.14: 核心框架
• Vue Router 3.6.5: 路由管理
• Vuex 3.6.2: 状态管理
• Vuetify 2.6.0: Material Design UI组件库
• Axios 1.7.5: HTTP客户端

核心模块依赖关系

flowchart TD
    A[main.js] --> B[App.vue]
    A --> C[router/index.js]
    A --> D[store/index.js]
    A --> E[plugins/vuetify.js]
    
    B --> F[components/NavigatorPage.vue]
    B --> G[components/FooterPage.vue]
    B --> H[utils/index.js]
    
    C --> I[路由守卫逻辑]
    D --> J[状态管理逻辑]
    H --> K[认证工具函数]
    
    I --> L[页面组件]
    J --> M[全局状态]
    K --> N[Token验证]

常见问题解决方案

1. 路由导航重复错误

问题描述： 在Vue Router中频繁出现"NavigationDuplicated"错误

解决方案：

// 在router/index.js中重写push和replace方法
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => {
    if (err.name !== 'NavigationDuplicated') throw err
  })
}

参考文件： router/index.js

2. 认证状态管理问题

问题描述： 用户登录状态丢失或认证检查失败

解决方案：

// 在App.vue的created钩子中检查认证状态
created() {
  if(checkAuthorizaion()){
    this.$store.commit('set_authenticated', true)
    this.$store.commit('set_user_token', loadSessionToken());
  }else{
    this.$store.dispatch('set_authenticated', false);
  }
}

参考文件： App.vue

3. Token验证失败

问题描述： JWT token过期或无效导致认证失败

解决方案：

function checkAuthorizaion() {
  const token = Cookies.get("token");
  if (token) {
    try {
      const decodedToken = jwtDecode(token);
      const currentTime = Date.now() / 1000;
      if (decodedToken.exp > currentTime) {
        sessionStorage.setItem("token", token);
        return true;
      }
    } catch (error) {
      return false;
    }
  }
  return false;
}

参考文件： utils/index.js

4. HTTP请求拦截器配置

问题描述： API请求缺少认证头或配置错误

解决方案：

service.interceptors.request.use(
  config => {
    const token = getTokenFromCookie('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  }
);

参考文件： http/index.js

错误排查指南

1. 认证流程排查

flowchart TD
    A[用户访问页面] --> B{路由守卫检查}
    B -->|需要认证| C{是否已认证}
    B -->|无需认证| D[直接访问]
    
    C -->|已认证| D
    C -->|未认证| E[重定向到登录页]
    
    E --> F[用户登录]
    F --> G[设置Token]
    G --> H[更新认证状态]
    H --> I[重定向回原页面]
    
    style B fill:#ffa
    style C fill:#ffa

排查步骤：

1. 检查浏览器Cookie中是否存在token
2. 验证token是否过期（JWT解码）
3. 检查Vuex store中的认证状态
4. 确认路由守卫逻辑是否正确执行

2. 路由配置排查

sequenceDiagram
    participant U as 用户
    participant R as Router
    participant S as Store
    participant C as 组件
    
    U->>R: 导航到受保护路由
    R->>S: 检查认证状态
    S-->>R: 返回认证状态
    alt 未认证
        R->>U: 重定向到/login
    else 已认证
        R->>C: 加载对应组件
        C->>U: 渲染页面
    end

排查要点：

• 确认路由meta配置是否正确
• 检查路由守卫的beforeEach逻辑
• 验证组件懒加载是否正常

3. 状态管理排查

stateDiagram-v2
    [*] --> 未认证
    未认证 --> 已认证: 登录成功
    已认证 --> 未认证: 登出或Token过期
    已认证 --> 已认证: 刷新Token
    未认证 --> 未认证: 登录失败

状态管理检查：

• Vuex mutations是否正确触发
• 状态持久化是否正常
• 组件与store的连接是否正确

调试技巧

1. 开发环境调试

启用调试模式：

// 路由守卫中的调试模式检查
const isDebugMode = process.env.NODE_ENV === 'development';
if (isDebugMode) {
  console.log('Debug mode: skipping authentication check');
  next();
  return;
}

参考文件： router/index.js

2. 日志记录配置

Vue Logger配置：

const options = {
  isEnabled: true,
  logLevel: process.env.NODE_ENV === 'production' ? 'info' : 'debug',
  stringifyArguments: false,
  showLogLevel: true,
  showMethodName: true,
  separator: '|',
  showConsoleColors: true
};
Vue.use(VueLogger, options);

参考文件： main.js

3. API请求调试

请求拦截器调试：

// 在http拦截器中添加调试信息
service.interceptors.request.use(
  config => {
    console.log('Request URL:', config.url);
    console.log('Request Headers:', config.headers);
    return config;
  }
);

性能优化建议

1. 组件懒加载

所有路由组件都使用懒加载模式：

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

参考文件： router/index.js

2. 状态管理优化

使用Vuex进行集中状态管理，避免组件间复杂的数据传递。

3. 依赖管理

定期更新依赖包版本，注意兼容性问题。

索引

本故障排除指南基于对邮轮穿舱件管理系统前端代码的深入分析，提供了从架构理解到具体问题解决的完整方案。关键要点包括：

1. 认证系统：基于JWT token的认证机制
2. 路由管理：完善的路由守卫和懒加载机制
3. 状态管理：Vuex集中式状态管理
4. 错误处理：全面的异常捕获和处理机制

通过遵循本文档的指导，可以快速定位和解决系统中的常见问题，确保系统的稳定运行。

参考文件汇总：

• package.json
• main.js
• App.vue
• router/index.js
• store/index.js
• utils/index.js
• http/index.js