【问题标题】:How to handle authorization token如何处理授权令牌
【发布时间】:2016-05-30 16:54:29
【问题描述】:

我想在每次发送 http 请求时将身份验证令牌添加到 http 请求标头,如果授权失败,我想将用户重定向到登录。我应该装饰 Http Driver 还是有更好的方法呢?

我带来了一个装饰 http 驱动程序的解决方案。但我不确定这是正确的做法。这是到目前为止我编写的代码:

import Rx from 'rx';
import {makeHTTPDriver} from '@cycle/http';

function makeSecureHTTPDriver({eager = false} = {eager: false}) {

    return function secureHTTPDriver(request$) {
        const httpDriver = makeHTTPDriver(eager);

        const securedRequest$ = request$
            .map(request => {
                const token = localStorage.getItem('token');

                if (token) {
                    request.headers = request.headers || {};
                    request.headers['X-AUTH-TOKEN'] = token;
                }

                return request;
            });

        const response$ = httpDriver(securedRequest$);
        //todo: check response and if it fails, redirect to the login page

        return response$;
    }
}

export default makeSecureHTTPDriver;

这是我如何使用 makeSecureHttpDriver 的代码

const drivers = {
        DOM: makeDOMDriver('#app'),
        HTTP: makeSecureHttpDriver()
    };

【问题讨论】:

    标签: javascript cyclejs


    【解决方案1】:

    这有点晚了,我不经常这样做。我建议使用其他驱动程序来避免在您的驱动程序中放置任何逻辑。

    import storageDriver from '@cycle/storage'
    import {makeHTTPDriver} from '@cycle/http'
    
    function main(sources) {
     const {storage, HTTP} = sources
     const token$ = storage.local.getItem('token')
      .startWith(null)
    
     const request$ = createRequest$(sources)
    
     const secureRequest$ = request$.withLatestFrom(token$, 
       (request, token) => token ? 
         Object.assign(request, {headers: {'X-AUTH-HEADER' : token }) : 
         request
     )
     return {HTTP: secureRequest$, ...}
    }
    
    Cycle.run(main, {
     ...
     storage: storageDriver,
     HTTP: makeHTTPDriver()
    })
    

    【讨论】:

      【解决方案2】:

      我不确定这是否会有所帮助,但 HTTP 驱动程序是超级代理,因此您可以将对象传递给它,例如 here

      但关于您的问题,我认为HTTP driver 可能需要将此选项添加到它自己的驱动程序中,以便您可以决定驱动程序是否应该是安全的,例如:

      const drivers = {
          DOM: makeDOMDriver('#app'),
          HTTP: makeSecureHttpDriver({secure:true})
      };
      

      因为您的实现对我来说看起来不错,所以将它包含在驱动程序本身中可能是值得的。 我会在 HTTP 驱动程序存储库中创建一个问题,看看社区的想法,您也可以通过 gitter channel 要求人们进行交互 :-)

      【讨论】:

        猜你喜欢
        • 2020-12-18
        • 2011-06-12
        • 2020-07-06
        • 2023-03-11
        • 2019-06-01
        • 2018-08-17
        • 2018-04-04
        • 2021-04-15
        • 2016-05-28
        相关资源
        最近更新 更多