020. 应用服务、Axios 拦截器与静态资源处理

学习目标

这一节继续整理前端基础服务，把 token、请求实例、用户信息和静态资源处理串起来。

学完后，你应该能理解：

• 为什么请求逻辑要集中到应用服务里；
• Axios 实例为什么需要请求拦截器和响应拦截器；
• 哪些接口需要自动带 token，哪些接口不需要；
• 401 响应为什么要回到登录页；
• pages、private、public 三类服务有什么区别；
• 为什么大项目里静态图片不一定适合直接交给打包工具处理。

前端服务已经进入收尾

前面已经完成了 token 保存、token 刷新和刷新排队。

这一节开始把这些能力收进统一的应用服务里。

页面以后不应该到处手写：

• 创建 Axios 实例；
• 设置 token；
• 判断 401；
• 初始化用户信息；
• 区分公开页面和登录后页面。

这些都属于通用基础设施。

对 JS 开发者来说，可以把它理解成把零散请求工具收敛成一个 useAppService。

页面只使用服务，不直接关心底层怎么拼请求。

创建 Axios 实例

课程里封装了创建请求实例的方法。

这个方法会返回一个配置好的 Axios 实例。

它主要处理两件事：

• 请求发出去前，决定是否加 Authorization；
• 响应回来后，发现 401 就处理登录态失效。

这样每个业务接口不用自己写 token 逻辑。

如果把 token 设置写在页面里，后面页面一多，逻辑会散得很厉害。

请求拦截器

请求拦截器会在请求真正发出去前执行。

它会检查当前请求配置里是否需要设置 token。

大部分登录后接口都需要 token。

少部分接口不需要，例如：

• 登录接口；
• 刷新 token 接口；
• 公开页面接口；
• 一些不要求身份认证的资源接口。

所以请求配置里会扩展一个类似 setToken 的字段。

如果 setToken 是 false，就不自动加 token。

如果没有设置，默认按当前服务类型决定。

TypeScript 类型扩展

Axios 原本的请求配置类型里没有 setToken。

课程里通过 TypeScript 的模块扩展，把这个字段补进请求配置类型。

这样写代码时可以得到类型提示。

这对大型项目很重要。

如果只是随手往对象上塞字段，短期能跑，长期会很容易写错字段名。

类型扩展的作用是让“项目自定义配置”也进入类型系统。

响应拦截器

响应拦截器主要处理 401。

即使前端本地保存的 token 没过期，后端也可能拒绝它。

原因可能包括：

• 用户修改了密码；
• 用户修改了手机号；
• 后端主动让旧 token 失效；
• 账号权限变化；
• refresh token 已不可用。

所以前端不能只看本地时间判断 token 是否有效。

如果后端返回 401，说明当前身份已经不能继续使用，页面应该回到登录流程。

三类应用服务

课程里区分了几类页面服务。

pages 和 private 页面通常需要用户身份。

它们会：

• 自动创建 token 服务；
• 自动创建请求实例；
• 自动设置 token；
• 自动初始化用户信息。

public 页面不需要登录态。

它不会默认设置 token，也不需要初始化当前用户。

这样公开页面和登录后页面就不会混用同一套请求规则。

refresh 请求不带 access token

刷新 token 的请求本身不应该依赖旧 access token。

因为发起 refresh 时，access token 可能已经失效。

所以 refresh 服务会单独创建请求实例，不走默认自动加 token 的规则。

这和登录接口一样，都属于认证流程里的特殊接口。

静态资源引用

课程后半段讨论了静态资源，尤其是图片。

传统写法可能是在代码里 import logo from './logo.png'。

打包工具会处理这张图：

• 小图片可能转成 Base64 放进 JS；
• 大图片可能复制成独立文件；
• 文件名可能带 hash。

这种方式对普通项目没问题。

但项目变大后，图片越来越多，打包压力会变大。

public 目录与 CDN

如果某些图片不需要参与打包，可以放到 public 目录或上传到 CDN。

这样图片不会被 Webpack / Vite 处理，也不会增加 JS 打包压力。

但代价是：

• 路径需要自己维护；
• 图片更新后可能要改访问路径；
• 浏览器缓存可能导致用户看到旧图；
• CDN 或资源管理也需要额外成本。

所以静态资源没有唯一正确答案。

小项目怎么方便怎么来。

大项目要考虑打包时间、缓存刷新、资源管理和部署成本。

路径拼接

课程里还提到类似 pathJoin 的工具。

它的作用是拼接 URL 或路径时处理多余斜杠。

例如：

/public/ + /logo.png -> /public/logo.png

这类工具本身不复杂，但能减少路径拼接时的小错误。

阶段重点

这一节的重点是前端基础设施收口。

请求实例、token、用户信息、公开页面、登录后页面、静态资源，都不能长期散落在页面代码里。

把它们统一到应用服务里，后面开发 AI 简历页面、模型调用页面和部署页面时，代码会更稳。