美文网首页
React-Native Cookie使用时出现的问题

React-Native Cookie使用时出现的问题

作者: reddream520 | 来源:发表于2017-06-30 09:41 被阅读0次

    问题

    针对以下场景进行了探索:

    1.访问接口A返回的cookie值,在后续访问接口B时,是否会带上?

    在react native中,使用fetch api访问后台接口。访问同一站点,接口A返回的cookie值,在继续范围该站点接口B时,通过抓包工具可以观察到,cookie在请求中会被带上

    ios和android均验证有效

    2.在react native应用中登录后,登录态如何传递给webview中第三方业务的页面?

    在web开发中,调用登录接口后,返回结果会在cookie中设置token值。当从这一页面进入其他第三方业务的页面时,在各页面主域名一致,均和cookie中token值的域名匹配时,打开第三方业务页面,会直接将带有token的cookie值设置在请求头中,从而实现登录态的共享。

    在react native应用中,沿用web端登录接口。当使用fetch api调用登录接口login后,接口返回头中设置cookie

    token,域名.main.com。从react native应用通过webview打开url

    为b.main.com第三方页面时,因为主域名一致,均与cookie中token域名匹配,此时打开页面的请求中,也会自动带上含有token的cookie,从而实现登录态的共享。

    ios和android均验证有效

    3.登录后,关闭应用再次进入,登录态是否保持?

    登录应用后,采用杀进程方式关闭应用。再次打开应用,期望登录态依然保持,实际效果如何?

    如果登录接口返回cookie时,为cookie值设置了过期时间,且过期时间在当前时间之后,即未过期。则再次进入应用,cookie值仍然保持。ios和android均验证有效

    如果登录接口返回cookie时,cookie值没有设置过期时间,或者设置了一个在当前时间之前的时间。则再次进入应用时,ios端cookie值丢失,android端仍保持

    因此,为了在再次进入应用时,仍然保持登录态。登录接口设置cookie token时,需要设置一个相对较久的过期时间。

    4.可否为请求主动设置cookie?

    假如在集成react native的原生应用中,原生应用完成登录。由原生应用进入react

    native应用时,通过变量传递方式传递一个token值。这时在react

    native应用接口及通过webview加装第三方业务时,怎么共享由原生端传递的登录态?

    这种场景相当于本身没有cookie,需要在react native中主动为请求设置cookie,将token值设置到请求头中,以此来实现登录态的传递。

    原理

    为什么再次进入应用中,仍然能获取到cookie值的原因。

    react-native-cookiemanager安卓端关键代码

    @ReactMethodpublicvoidsetCookie(ReadableMapoptions)

    {        String name =null;        String value =null;        String

    domain =null;        String origin =null;        String path =null;

    String expiration =null;if(options.hasKey(OPTIONS_NAME)) {

    name =options.getString(OPTIONS_NAME);

    }if(options.hasKey(OPTIONS_VALUE)) {            value

    =options.getString(OPTIONS_VALUE);

    }if(options.hasKey(OPTIONS_DOMAIN)) {            domain

    =options.getString(OPTIONS_DOMAIN);

    }if(options.hasKey(OPTIONS_ORIGIN)) {            origin

    =options.getString(OPTIONS_ORIGIN);

    }if(options.hasKey(OPTIONS_PATH)) {            path

    =options.getString(OPTIONS_PATH);

    }if(options.hasKey(OPTIONS_EXPIRATION)) {            expiration

    =options.getString(OPTIONS_EXPIRATION);        }

    CookieManager.getInstance().setCookie(origin, name +"="+ value +";"+

    OPTIONS_PATH +"="+ path +";"+ OPTIONS_EXPIRATION +"="+ expiration +";"+

    OPTIONS_DOMAIN +"="+ domain);    }/**

    * Gets the cookies for the given URL.

    *

    * @param url the URL for which the cookies are requested

    * @return value the cookies as a string, using the format of the 'Cookie'

    * HTTP request header

    */@ReactMethodpublicvoidgetCookie(String

    url, Callback callback) {        String cookie =

    CookieManager.getInstance().getCookie(url);

    callback.invoke(cookie);    }

    @ReactMethodpublicvoidremoveAllCookies() {if(Build.VERSION.SDK_INT >

    Build.VERSION_CODES.LOLLIPOP) {

    CookieManager.getInstance().removeAllCookies(newValueCallback() {

    @OverridepublicvoidonReceiveValue(Booleanvalue) {

    }            });        }else{

    CookieManager.getInstance().removeAllCookie();        }    }

    react-native-cookiemanager ios端关键代码

    RCT_EXPORT_METHOD(setCookie:(NSDictionary

    *)props) {    NSString *name = [RCTConvertNSString:props[@"name"]];

    NSString *value = [RCTConvertNSString:props[@"value"]];    NSString

    *domain = [RCTConvertNSString:props[@"domain"]];    NSString *origin =

    [RCTConvertNSString:props[@"origin"]];    NSString *path =

    [RCTConvertNSString:props[@"path"]];    NSDate *expiration =

    [RCTConvertNSDate:props[@"expiration"]];    NSMutableDictionary

    *cookieProperties = [NSMutableDictionary dictionary];

    [cookiePropertiessetObject:nameforKey:NSHTTPCookieName];

    [cookiePropertiessetObject:valueforKey:NSHTTPCookieValue];

    [cookiePropertiessetObject:domainforKey:NSHTTPCookieDomain];

    [cookiePropertiessetObject:originforKey:NSHTTPCookieOriginURL];

    [cookiePropertiessetObject:pathforKey:NSHTTPCookiePath];

    [cookiePropertiessetObject:expirationforKey:NSHTTPCookieExpires];

    NSHTTPCookie *cookie =

    [NSHTTPCookiecookieWithProperties:cookieProperties];

    [[NSHTTPCookieStorage

    sharedHTTPCookieStorage]setCookie:cookie];}RCT_EXPORT_METHOD(clearAll:(RCTResponseSenderBlock)callback)

    {    NSHTTPCookieStorage *cookieStorage = [NSHTTPCookieStorage

    sharedHTTPCookieStorage];for(NSHTTPCookie *cincookieStorage.cookies) {

    [cookieStoragedeleteCookie:c];    }

    callback(@"success");}//TODO:return a better formatted list of cookies

    per domainRCT_EXPORT_METHOD(getAll:(RCTResponseSenderBlock)callback) {

    NSHTTPCookieStorage *cookieStorage = [NSHTTPCookieStorage

    sharedHTTPCookieStorage];    NSMutableDictionary *cookies =

    [NSMutableDictionary dictionary];for(NSHTTPCookie

    *cincookieStorage.cookies) {        NSMutableDictionary *d =

    [NSMutableDictionary dictionary];

    [dsetObject:c.valueforKey:@"value"];

    [dsetObject:c.nameforKey:@"name"];

    [dsetObject:c.domainforKey:@"domain"];

    [dsetObject:c.pathforKey:@"path"];

    [cookiessetObject:dforKey:c.name];    }    callback(@[cookies,

    @"success"]);}

    相关文章

      网友评论

          本文标题:React-Native Cookie使用时出现的问题

          本文链接:https://www.haomeiwen.com/subject/ynjbcxtx.html