V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
frankkai
V2EX  ›  前端开发

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

  •  
  •   frankkai · 2018-03-21 00:29:20 +08:00 via Android · 3264 次点击
    这是一个创建于 2475 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    17 条回复    2018-03-21 13:42:34 +08:00
    wdlth
        1
    wdlth  
       2018-03-21 00:35:54 +08:00 via Android
    比如密码前端预加密
    MeteorCat
        2
    MeteorCat  
       2018-03-21 00:41:30 +08:00 via Android
    CSRF 攻击一般是在 POST 表单附加个隐藏标识字段验证下就行了,你们模板是 JS 渲染还是后端渲染?
    frankkai
        3
    frankkai  
    OP
       2018-03-21 00:41:57 +08:00 via Android
    @wdlth 前端预加密的话,后端需要解密吗
    frankkai
        4
    frankkai  
    OP
       2018-03-21 00:46:50 +08:00 via Android
    @MeteorCat 前端渲染的,有安全性问题吗
    MeteorCat
        5
    MeteorCat  
       2018-03-21 08:35:14 +08:00 via Android
    @frankkai 前端渲染需要添加 header 头部进行标识
    shintendo
        6
    shintendo  
       2018-03-21 09:16:06 +08:00
    不知道你说的“ token 认证”是指什么,一般是请求拦截器往请求里面加 token 吧?
    响应拦截器可以做一些统一的预处理,比如服务器返回“未登录”“无权限”之类的,跳转到登录页去
    ChefIsAwesome
        7
    ChefIsAwesome  
       2018-03-21 09:41:32 +08:00   ❤️ 3
    你叫“拦截器”,我叫程序的“ api 层”。对 view 来讲,它是一层代理。其实就是把 request 的方法封装而已。
    稍微复杂的 app,我一般都这样设计:server <> api 层 <> view
    view 层不需要关心跟服务器交互的很多细节,直接调 api 层的提供的函数就行了。
    api 层能做什么呢?
    - 缓存;
    - 同时发几个请求,再把结果合并;
    - 统一处理超时、错误、重定向;
    - 管理请求的地址、在 header 里头加需要的标识;
    - 抽取返回数据中需要的部分,转化返回数据的格式;
    - 把图片压缩;
    frankkai
        8
    frankkai  
    OP
       2018-03-21 09:43:06 +08:00
    @shintendo 对的,就是加 token。明白了,响应拦截器可以做“登录异常(权限异常)的重定向”
    frankkai
        9
    frankkai  
    OP
       2018-03-21 09:47:53 +08:00
    @ChefIsAwesome 可以的,api 层这一层分离出来很清爽。api 层能做的这些事情我需要结合《 http 权威指南》再理解理解,感谢~
    shintendo
        10
    shintendo  
       2018-03-21 09:54:33 +08:00
    @frankkai
    登录成功的时候,后端返回 token,前端保存下来,以后每次发送请求的时候都带上这个 token,这个“带上 token ”的动作你可以手动在每一次请求里写,也可以统一放在请求拦截器里做,而 token 的验证当然还是后端的事情
    BearD01001
        11
    BearD01001  
       2018-03-21 10:09:08 +08:00 via iPhone
    拦截 Request 加 token 加数据校验。

    拦截 Response 加异常捕获。
    frankkai
        12
    frankkai  
    OP
       2018-03-21 11:32:16 +08:00
    @shintendo 除了 cookie 和 session,前端还有什么可以保存 token 的地方呢
    frankkai
        13
    frankkai  
    OP
       2018-03-21 11:35:49 +08:00
    @BearD01001 数据校验指的是什么?异常捕获在 catch(error)里也可以做吗?
    BearD01001
        14
    BearD01001  
       2018-03-21 12:50:00 +08:00 via iPhone
    @frankkai 数据校验一般是对用户输入的数据进行合法性检测,防止 XSS。异常捕获一般是对接口返回的异常信息或接口请求过程中发生的错误信息进行处理,通常做法是给用户相应的提示信息,并预留出回调函数交回具体的业务层进一步处理异常状态。
    hcymk2
        15
    hcymk2  
       2018-03-21 12:53:25 +08:00
    前端通过合法性检测来防止 xss 有意义么?
    shintendo
        16
    shintendo  
       2018-03-21 13:31:19 +08:00
    @frankkai
    localStorage
    simpleapples
        17
    simpleapples  
       2018-03-21 13:42:34 +08:00   ❤️ 1
    比如 oauth2 认证,拦截 response,当 response 为 401 时候,用 refresh_token 重新获取 access_token
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2619 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:17 · PVG 23:17 · LAX 07:17 · JFK 10:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.