前端有哪些拦截请求和响应的应用场景？

[frankkai]

最近在做一个项目，看到同事用了 axios 的请求拦截器。 请求发送到 server 前，做了 token 的认证和模拟用户表单提交数据两件事。 我的理解是，token 认证是一种安全认证机制，主要后端去搞的。感觉模拟用户提交表单和前端关系大一点，也和 web 前端安全有关，不过我们这里只是单纯的为了将用户填表的结果封装成一组值。拦截表单有什么应用场景呢？ 除了拦截请求，还可以拦截响应，但是不懂为什么要去拦截。 所以想来问问 V 友们，前端有哪些拦截请求和响应的应用场景？

[wdlth]

比如密码前端预加密

[MeteorCat]

CSRF 攻击一般是在 POST 表单附加个隐藏标识字段验证下就行了，你们模板是 JS 渲染还是后端渲染？

[frankkai]

@wdlth 前端预加密的话，后端需要解密吗

[frankkai]

@MeteorCat 前端渲染的，有安全性问题吗

[MeteorCat]

@frankkai 前端渲染需要添加 header 头部进行标识

[shintendo]

不知道你说的“ token 认证”是指什么，一般是请求拦截器往请求里面加 token 吧？
响应拦截器可以做一些统一的预处理，比如服务器返回“未登录”“无权限”之类的，跳转到登录页去

[ChefIsAwesome]

你叫“拦截器”，我叫程序的“ api 层”。对 view 来讲，它是一层代理。其实就是把 request 的方法封装而已。
稍微复杂的 app，我一般都这样设计：server <> api 层 <> view
view 层不需要关心跟服务器交互的很多细节，直接调 api 层的提供的函数就行了。
api 层能做什么呢？
- 缓存；
- 同时发几个请求，再把结果合并；
- 统一处理超时、错误、重定向；
- 管理请求的地址、在 header 里头加需要的标识；
- 抽取返回数据中需要的部分，转化返回数据的格式；
- 把图片压缩；
…

[frankkai]

@shintendo 对的，就是加 token。明白了，响应拦截器可以做“登录异常（权限异常）的重定向”

[frankkai]

@ChefIsAwesome 可以的，api 层这一层分离出来很清爽。api 层能做的这些事情我需要结合《 http 权威指南》再理解理解，感谢～

[shintendo]

@frankkai
登录成功的时候，后端返回 token，前端保存下来，以后每次发送请求的时候都带上这个 token，这个“带上 token ”的动作你可以手动在每一次请求里写，也可以统一放在请求拦截器里做，而 token 的验证当然还是后端的事情

[BearD01001]

拦截 Request 加 token 加数据校验。

拦截 Response 加异常捕获。

[frankkai]

@shintendo 除了 cookie 和 session，前端还有什么可以保存 token 的地方呢

[frankkai]

@BearD01001 数据校验指的是什么？异常捕获在 catch(error)里也可以做吗？

[BearD01001]

@frankkai 数据校验一般是对用户输入的数据进行合法性检测，防止 XSS。异常捕获一般是对接口返回的异常信息或接口请求过程中发生的错误信息进行处理，通常做法是给用户相应的提示信息，并预留出回调函数交回具体的业务层进一步处理异常状态。

[hcymk2]

前端通过合法性检测来防止 xss 有意义么？

[shintendo]

@frankkai
localStorage

[simpleapples]

比如 oauth2 认证，拦截 response，当 response 为 401 时候，用 refresh_token 重新获取 access_token