面试题：Vue网络请求拦截器中如何处理不同类型的认证错误

Question

在一个使用Vue开发的前后端分离项目中，前端通过网络请求与后端交互，后端使用不同的HTTP状态码表示认证相关错误（如401未授权、403禁止访问）。请说明在Vue的网络请求拦截器里，怎样针对这些不同的认证错误进行统一处理，并且根据不同错误引导用户进行相应操作（如401时跳转到登录页面，403时提示权限不足）。

Answer 1

在Vue项目中，可以利用axios的拦截器来统一处理认证相关错误。以下是实现步骤：

1. 安装axios： 如果项目尚未安装axios，可以通过以下命令安装：

npm install axios --save

2. 创建拦截器： 在项目合适位置（如src/utils/request.js）创建axios实例并添加拦截器。

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

// 添加响应拦截器
service.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    const { status } = error.response;
    if (status === 401) {
      // 跳转到登录页面
      // 假设使用vue-router
      import router from '@/router';
      router.push('/login');
    } else if (status === 403) {
      // 提示权限不足
      // 假设使用element-ui的Message组件
      import { Message } from 'element-ui';
      Message.error('权限不足');
    }
    return Promise.reject(error);
  }
);

export default service;

3. 使用自定义的axios实例： 在需要发送网络请求的地方，使用上述创建的service实例，而不是默认的axios。例如：

import service from '@/utils/request';

service.get('/your-api-url')
 .then(response => {
    // 处理响应
  })
 .catch(error => {
    // 错误已在拦截器中处理，这里一般不需要额外处理
  });

这样，在Vue项目中就实现了对不同认证错误的统一处理，并引导用户进行相应操作。