面试题：Vue中拦截器对不同响应状态码的精细化处理

Question

在Vue项目里，利用拦截器处理网络响应。当遇到状态码401（未授权）时，要跳转到登录页；遇到403（禁止访问）时，弹出提示框告知用户权限不足；遇到500（服务器错误）时，记录错误日志到本地文件（假设已有记录日志的函数writeLog）。请写出具体实现代码，并说明这种处理方式对项目稳定性和用户体验的影响。

Answer 1

代码实现

在Vue项目中，通常在axios中配置拦截器来处理网络响应。假设已经安装了axios，以下是具体实现代码：

import axios from 'axios';
import Vue from 'vue';
import router from '@/router'; // 假设router已正确引入

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (!error.response) {
      // 处理网络连接问题等非HTTP响应错误
      return Promise.reject(error);
    }
    const { status } = error.response;
    if (status === 401) {
      // 跳转到登录页
      router.push('/login');
    } else if (status === 403) {
      // 弹出提示框告知用户权限不足
      Vue.prototype.$message.error('权限不足');
    } else if (status === 500) {
      // 记录错误日志到本地文件
      writeLog(error.message);
    }
    return Promise.reject(error);
  }
);

对项目稳定性和用户体验的影响

1. 项目稳定性
   • 增强稳定性：通过拦截器统一处理不同状态码的错误，使得项目在面对各种网络响应错误时都有对应的处理逻辑。例如，当服务器返回500错误时，记录错误日志到本地文件，便于开发人员排查问题，有助于快速定位和修复服务器端的错误，提升项目整体的稳定性。
   • 避免异常崩溃：对401和403等客户端错误进行合理处理，避免因未授权或权限不足导致页面出现无意义的错误提示或功能异常，保证了前端应用在这些情况下能够正常运行，不会因为这类错误而崩溃。
2. 用户体验
   • 明确反馈：当遇到401状态码时，自动跳转到登录页，引导用户重新登录获取授权，让用户清晰知道需要进行何种操作来恢复正常使用。而遇到403状态码时，弹出提示框告知权限不足，给用户一个明确的解释，避免用户对无法访问功能产生困惑。
   • 友好交互：这种处理方式避免了用户看到一些晦涩难懂的HTTP状态码，以一种更加友好、易懂的方式与用户交互，提升了用户对产品的好感度和使用体验。