跳到主要内容

邮轮穿舱件管理系统 - 前端错误处理机制文档

概述​

本文档详细分析了邮轮穿舱件管理系统前端页面的错误码定义、异常处理机制和用户友好的错误提示实现。系统采用Vue.js框架构建，结合Vue Router、Vuex和Axios等现代前端技术栈，实现了全面的错误处理体系。

错误处理架构​

系统架构图​

flowchart TD
    A[用户操作] --> B[Vue组件]
    B --> C[HTTP请求]
    C --> D[Axios拦截器]
    D --> E[后端API]
    E --> F{响应处理}
    F -->|成功| G[数据处理]
    F -->|失败| H[错误分类]
    H --> I[网络错误]
    H --> J[认证错误]
    H --> K[权限错误]
    H --> L[业务错误]
    I --> M[错误提示]
    J --> N[重定向登录]
    K --> O[权限提示]
    L --> P[业务提示]

核心错误处理组件​

系统通过以下核心组件实现错误处理：

  1. Axios HTTP拦截器 - 统一处理HTTP请求和响应错误
  2. Vue Router导航守卫 - 处理路由级别的权限和认证错误
  3. Vuex状态管理 - 统一管理错误状态和用户认证状态
  4. Vuetify UI组件 - 提供用户友好的错误提示界面

错误码定义与分类​

HTTP状态码处理​

系统根据HTTP状态码进行错误分类：

状态码错误类型处理方式用户提示
401未授权重定向到登录页"请先登录"
403权限不足显示权限错误页面"权限不足，请联系管理员"
404资源未找到显示404页面"页面未找到"
500服务器错误显示错误信息"服务器内部错误"
网络错误连接失败显示网络错误"网络连接失败，请检查网络"

业务错误码​

系统通过响应数据中的状态码处理业务错误：

// 在HTTP拦截器中处理业务错误
service.interceptors.response.use(
  response => {
    if (response.data && response.data.code !== 200) {
      // 业务逻辑错误处理
      return Promise.reject(new Error(response.data.message));
    }
    return response;
  },
  error => {
    // HTTP错误处理
    return Promise.reject(error);
  }
);

异常处理机制​

1. HTTP请求异常处理​

Axios拦截器实现​

系统在src/http/index.js中配置了完整的请求和响应拦截器：

// 请求拦截器 - 添加认证令牌
service.interceptors.request.use(
  config => {
    const token = getTokenFromCookie('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器 - 统一错误处理
service.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

参考文件： src/http/index.js

2. 路由级别异常处理​

导航守卫实现​

系统在src/router/index.js中实现了全局路由守卫，处理认证和权限错误：

router.beforeEach((to, from, next) => {
  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();
  }
});

参考文件： src/router/index.js

3. 组件级别异常处理​

登录组件错误处理​

在src/views/LoginView.vue中实现了详细的登录错误处理：

methods: {
  submit() {
    if (this.$refs.form.validate() && this.turnstileToken) {
      http.post('/token', {
        username: this.formData.username,
        password: this.formData.password,
        'cf-turnstile-response': this.turnstileToken
      }).then(response => {
        if (response.status == 200) {
          // 登录成功处理
        } else {
          this.showSnackbar("登录失败"+response.status+" "+response.data);
          this.resetTurnstile();
        }
      }).catch(error => { 
        this.showSnackbar("登录失败"+error); 
        this.resetTurnstile();
      });
    }
  },
  showSnackbar(message = 'Login error', timeout = 5000) {
    this.message = message;
    this.timeout = timeout;
    this.snackbar = true;
  }
}

参考文件： src/views/LoginView.vue

用户友好的错误提示实现​

1. Snackbar提示组件​

系统使用Vuetify的Snackbar组件提供即时错误反馈：

<template>
  <v-snackbar v-model="snackbar" :timeout="timeout">
    {{ message }}
    <template v-slot:action="{ attrs }">
      <v-btn color="white" text v-bind="attrs" @click="snackbar = false">
        关闭
      </v-btn>
    </template>
  </v-snackbar>
</template>

2. 专用错误页面​

404页面实现​

系统提供了专门的404错误页面，位于src/views/NotFoundView.vue：

<template>
  <v-container fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="4">
        <v-card class="elevation-12">
          <v-toolbar color="primary" dark>
            <v-toolbar-title>404 - 页面未找到 | 401 - 未授权</v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <h2 class="headline mb-3">抱歉！您要查找的页面无法找到或未经授权的访问</h2>
            <p>请求的URL <strong>{{ $route.path }}</strong> 在此服务器上未找到。</p>
            <!-- 详细的错误说明和解决方案 -->
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

参考文件： src/views/NotFoundView.vue

权限错误页面实现​

系统提供了专门的权限错误页面，位于src/views/admin/NotAllowed.vue：

<template>
  <v-container fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="6">
        <v-card class="elevation-12">
          <v-toolbar color="error" dark>
            <v-icon left>mdi-shield-lock</v-icon>
            <v-toolbar-title>访问受限 - 权限不足</v-toolbar-title>
          </v-toolbar>
          <v-card-text>
            <h2 class="headline mb-4 error--text">抱歉！您没有访问此页面的权限</h2>
            <p class="text-body-1 mb-3">当前登录用户不是财务用户，无法访问财务管理相关功能。</p>
            <!-- 详细的权限说明和解决方案 -->
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

参考文件： src/views/admin/NotAllowed.vue

3. 表单验证错误处理​

系统实现了完整的表单验证机制：

data: () => ({
  rules: {
    required: value => !!value || '必填项',
    minLength: value => (value && value.length >= 6) || '至少6个字符',
  },
}),

错误处理流程图​

完整的错误处理流程​

sequenceDiagram
    participant U as 用户
    participant C as Vue组件
    participant I as 拦截器
    participant B as 后端API
    participant R as 路由器
    participant S as 状态管理
    
    U->>C: 执行操作
    C->>I: 发送HTTP请求
    I->>B: 转发请求
    alt 请求成功
        B-->>I: 返回数据
        I-->>C: 处理响应
        C-->>U: 显示成功
    else 认证失败(401)
        B-->>I: 返回401
        I-->>R: 触发重定向
        R-->>C: 跳转登录页
        C-->>U: 显示登录提示
    else 权限不足(403)
        B-->>I: 返回403
        I-->>C: 传递错误
        C-->>U: 显示权限错误页面
    else 资源未找到(404)
        B-->>I: 返回404
        I-->>R: 触发404路由
        R-->>C: 显示404页面
        C-->>U: 显示未找到提示
    else 服务器错误(500)
        B-->>I: 返回500
        I-->>C: 传递错误
        C-->>U: 显示服务器错误
    else 网络错误
        I-->>C: 捕获异常
        C-->>U: 显示网络错误
    end

工具函数错误处理​

系统在src/utils/index.js中提供了工具函数级别的错误处理：

function getUserInfoFromToken() {
    const token = Cookies.get("token");
    if (token) {
        try {
            const decodedToken = jwtDecode(token);
            const currentTime = Date.now() / 1000;
            if (decodedToken.exp > currentTime) {
                return {
                    user_id: decodedToken.uid,
                    username: decodedToken.username || decodedToken.uid,
                    exp: decodedToken.exp,
                };
            } else {
                console.warn("Token已过期");
                return null;
            }
        } catch (error) {
            console.error("解析token失败:", error);
            return null;
        }
    } else {
        console.warn("未找到token");
        return null;
    }
}

参考文件： src/utils/index.js

状态管理错误处理​

系统使用Vuex进行错误状态管理：

state: {
    navigator_drawer: false,
    authenticated: false,     // 认证状态
    user_info: null,          // 用户信息
    user_token: null          // 用户令牌
},
mutations: {
    set_authenticated(state, value) {
        state.authenticated = value
    }
}

参考文件： src/store/index.js

最佳实践和设计模式​

1. 统一错误处理模式​

系统采用统一的错误处理模式：

  • 拦截器模式：通过Axios拦截器统一处理HTTP错误
  • 守卫模式：通过路由守卫处理导航错误
  • 组件模式：通过专用错误组件处理界面错误

2. 渐进式错误提示​

系统实现了渐进式的错误提示策略：

  1. 即时反馈：表单验证错误即时显示
  2. 操作反馈：HTTP请求错误通过Snackbar提示
  3. 页面级反馈：重大错误通过专用错误页面显示

3. 错误恢复机制​

系统提供了完善的错误恢复机制：

  • 自动重定向：认证失败自动跳转登录页
  • 状态保持：登录后返回原请求页面
  • 清理机制：错误后自动重置相关状态

索引​

邮轮穿舱件管理系统前端实现了全面而完善的错误处理机制，涵盖了从HTTP请求到用户界面的完整错误处理链条。系统通过分层处理、统一接口和用户友好的提示方式，确保了良好的用户体验和系统稳定性。

关键特性包括：

  • 完整的HTTP错误码处理体系
  • 多层次的错误提示机制
  • 用户友好的错误页面设计
  • 完善的错误恢复和状态管理
  • 统一的错误处理架构和最佳实践

这种设计确保了系统在面对各种异常情况时能够提供清晰、有用的反馈，同时保持系统的稳定性和可维护性。