Angular 4 HttpInterceptor响应拦截及前端消息提示问题咨询

嘿，我来帮你搞定这两个问题！下面结合常见的请求库（以Axios为例），给你一套完整的解决方案：

1. 实现响应拦截（完美兼容你的请求拦截逻辑） #

Axios本身就支持响应拦截器，和请求拦截器的写法高度一致，完全可以和你现有的请求拦截逻辑整合在一起。

假设你原来的请求拦截代码是这样的：

import axios from 'axios';

// 请求拦截器：给所有请求添加withCredentials
axios.interceptors.request.use(
  config => {
    config.withCredentials = true;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

现在我们直接追加响应拦截器，专门捕获401状态码：

// 响应拦截器：捕获401并触发提示
axios.interceptors.response.use(
  response => {
    // 正常响应直接返回，不做额外处理
    return response;
  },
  error => {
    // 检查是否是401未授权响应
    if (error.response && error.response.status === 401) {
      // 这里调用提示逻辑，后面会讲怎么实现
      showLoginExpiredTip();
    }
    return Promise.reject(error);
  }
);

这样只要后端返回401状态码，就能被精准捕获到啦。

2. 实现页面消息提示（无需提前关联组件/DOM） #

因为你没有绑定任何组件或预先写好DOM元素，我们可以用两种简单方式实现提示：

方式一：原生浏览器alert（快速上手） #

如果对样式要求不高，直接用浏览器自带的alert()就能搞定，代码极简：

if (error.response && error.response.status === 401) {
  alert('登录状态已过期，请重新登录！');
}

方式二：自定义弹窗（美观可定制） #

要是觉得原生alert太丑，我们可以用JS动态创建DOM元素，生成一个好看的弹窗，完全不需要提前在页面写任何结构：

function showLoginExpiredTip() {
  // 先检查是否已有弹窗，避免重复创建
  const existingTip = document.getElementById('login-expired-tip');
  if (existingTip) return;

  // 创建弹窗容器
  const tipContainer = document.createElement('div');
  tipContainer.id = 'login-expired-tip';
  tipContainer.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: #dc3545;
    color: white;
    padding: 15px 25px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
  `;

  // 弹窗文本
  const tipText = document.createElement('span');
  tipText.textContent = '登录状态已过期，请重新登录！';

  // 关闭按钮
  const closeBtn = document.createElement('button');
  closeBtn.textContent = '×';
  closeBtn.style.cssText = `
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  `;
  closeBtn.addEventListener('click', () => {
    document.body.removeChild(tipContainer);
  });

  // 组装弹窗并添加到页面
  tipContainer.appendChild(tipText);
  tipContainer.appendChild(closeBtn);
  document.body.appendChild(tipContainer);

  // 3秒后自动关闭弹窗
  setTimeout(() => {
    if (document.body.contains(tipContainer)) {
      document.body.removeChild(tipContainer);
    }
  }, 3000);
}

然后在响应拦截器的401判断里调用这个函数即可。

完整整合代码 #

把所有逻辑放在一起，就是最终可用的代码：

import axios from 'axios';

// 请求拦截器：全局添加withCredentials
axios.interceptors.request.use(
  config => {
    config.withCredentials = true;
    return config;
  },
  error => Promise.reject(error)
);

// 自定义401提示弹窗函数
function showLoginExpiredTip() {
  const existingTip = document.getElementById('login-expired-tip');
  if (existingTip) return;

  const tipContainer = document.createElement('div');
  tipContainer.id = 'login-expired-tip';
  tipContainer.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: #dc3545;
    color: white;
    padding: 15px 25px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
  `;

  const tipText = document.createElement('span');
  tipText.textContent = '登录状态已过期，请重新登录！';

  const closeBtn = document.createElement('button');
  closeBtn.textContent = '×';
  closeBtn.style.cssText = `
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  `;
  closeBtn.addEventListener('click', () => document.body.removeChild(tipContainer));

  tipContainer.appendChild(tipText);
  tipContainer.appendChild(closeBtn);
  document.body.appendChild(tipContainer);

  setTimeout(() => {
    if (document.body.contains(tipContainer)) document.body.removeChild(tipContainer);
  }, 3000);
}

// 响应拦截器：捕获401并触发提示
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      showLoginExpiredTip();
    }
    return Promise.reject(error);
  }
);

这样就完美解决了你的两个问题：既实现了响应拦截捕获401，又能通过动态创建DOM的方式展示页面提示，完全不需要提前关联任何组件或DOM元素。

内容的提问来源于stack exchange，提问作者SexyMF