如何阻止前端自动记录未登录场景下的401 HTTP错误码？

问题背景 #

使用TypeScript/React前端 + TypeScript/Node.js后端搭建登录系统，当用户完全未登录（无access和refresh令牌）时，后端返回401（未授权）状态码，但该错误会自动在前端控制台打印冗余日志。未登录属于正常业务场景，此类日志无实际排查价值，尝试过axios拦截器、try/catch捕获、重写XMLHttpRequest.open方法等方案均无效，想咨询是否可以通过修改后端返回200状态码并携带布尔标识来解决，或者有更合适的方案。

前端HttpService工具类代码 #

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, CancelTokenSource } from "axios";
import { useNavigate } from "react-router-dom";

type CustomHeaders = {
  [key: string]: string | number | boolean;
};

type RequestResult<T> = {
  request: Promise<AxiosResponse<T>>;
  cancel: () => void;
};

class HttpService {
  private baseUrl: string;
  private instance: AxiosInstance;

  constructor(baseURL: string = "http://localhost:3001") {
    this.baseUrl = baseURL;
    this.instance = axios.create({ baseURL: this.baseUrl, withCredentials: true });
  }

  private get defaultHeaders(): CustomHeaders {
    return {
      Authorization: localStorage.getItem("Authorization") || "",
      "Content-Type": "application/json",
    };
  }

  private async request<T>(
    method: "get" | "post" | "put" | "delete",
    url: string,
    data: any = null,
    customHeaders: CustomHeaders = {}
  ): Promise<RequestResult<T>> {
    const headers = { ...this.defaultHeaders, ...customHeaders };
    const source: CancelTokenSource = axios.CancelToken.source();

    const config: AxiosRequestConfig = {
      method,
      url,
      headers,
      cancelToken: source.token,
    };

    if (data) {
      config.data = data;
    }

    return {
      request: this.instance.request<T>(config),
      cancel: source.cancel,
    };
  }

  public get<T>(url: string, customHeaders: CustomHeaders = {}): Promise<RequestResult<T>> {
    return this.request<T>("get", url, null, customHeaders);
  }

  public post<T>(url: string, data: any, customHeaders: CustomHeaders = {}): Promise<RequestResult<T>> {
    return this.request<T>("post", url, data, customHeaders);
  }

  public put<T>(url: string, data: any, customHeaders: CustomHeaders = {}): Promise<RequestResult<T>> {
    return this.request<T>("put", url, data, customHeaders);
  }

  public delete<T>(url: string, customHeaders: CustomHeaders = {}): Promise<RequestResult<T>> {
    return this.request<T>("delete", url, null, customHeaders);
  }
}

export default HttpService;

注：触发冗余错误日志的代码行是 request: this.instance.request<T>(config),

前端检查登录状态代码 #

useEffect(() => {
    const checkUserLoggedIn = async () => {
      try {
        const { request } = await httpService.get("/api/v1/user/checkAuth");
        const res: any = await request;
        setUser(res.data.user);
      } catch (err: any) {
        setUser(null);
      } finally {
        setIsLoading(false);
      }
    };

    checkUserLoggedIn();
  }, []);

后端authMiddleware中间件关键代码 #

const authMiddleware = async (req: Request, res: Response, next: NextFunction) => {
  const refreshToken = req.cookies.refresh_token;
  const accessToken = req.cookies.access_token;

  if (!refreshToken && !accessToken) {
    clearTokenCookies(res);
    return res.status(401).json({ message: "Access denied. No token provided." });
  }

  // 更多验证逻辑在此之后
}

控制台冗余错误日志 #

HttpService.ts:51 
 GET http://localhost:3001/api/v1/user/checkAuth 401 (Unauthorized)
dispatchXhrRequest  @   xhr.js:195
xhr @   xhr.js:15
dispatchRequest @   dispatchRequest.js:51
_request    @   Axios.js:173
request @   Axios.js:40
wrap    @   bind.js:5
request @   HttpService.ts:51
get @   HttpService.ts:57
checkUserLoggedIn   @   AuthProvider.tsx:28
(anonymous) @   AuthProvider.tsx:38
commitHookEffectListMount   @   react-dom.development.js:23189
commitPassiveMountOnFiber   @   react-dom.development.js:24965
commitPassiveMountEffects_complete  @   react-dom.development.js:24930
commitPassiveMountEffects_begin @   react-dom.development.js:24917
commitPassiveMountEffects   @   react-dom.development.js:24905
flushPassiveEffectsImpl @   react-dom.development.js:27078
flushPassiveEffects @   react-dom.development.js:27023
(anonymous) @   react-dom.development.js:26808
workLoop    @   scheduler.development.js:266
flushWork   @   scheduler.development.js:239
performWorkUntilDeadline    @   scheduler.development.js:533

核心疑问 #

1. 是否可以修改后端逻辑，返回200状态码并通过布尔值标识用户登录状态？
2. 有没有其他更符合HTTP规范的解决方案，既能避免控制台冗余日志，又能正确处理未登录场景？

注：已实现令牌刷新逻辑，问题仅针对用户完全未登录的场景。

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