React Native Cookie使用指南

React Native Cookie使用指南

web开发中，cookie是一个常用工具。通常会将用户与服务器会话的sessionid存储在cookie中，用以在请求中标示会话来源。或者将登录态token值存储在cookie中，请求中通过cookie值校验登录态。

当我们使用react native开发应用时，是否还能像在web开发中那样使用cookie呢？官方文档中没有相关资料，需要我们自己去探索。

场景探索

本文采用react native 0.35版本，针对以下场景进行了探索

• 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值设置到请求头中，以此来实现登录态的传递。

  社区中已经有相应方法，可以查阅react-native-cookies
  或者react-native-cookiemanager

原理分析

上述场景中可见，react native对cookie支持度还是很高的。那么这个支持是如何实现的呢？带着这个问题，笔者阅读了react-native-cookiemanager的源码。

笔者没有原生客户端开发经验，是通过阅读代码，发现实际在客户端，android和ios各有原生api支持对cookie的操作。并且，通过查阅资料，了解到安卓和ios端，分别会将cookie以文件形式持久化，这也是为什么再次进入应用中，仍然能获取到cookie值的原因。

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

@ReactMethod
    public void setCookie(ReadableMap options) {
        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
     */
    @ReactMethod
    public void getCookie(String url, Callback callback) {
        String cookie = CookieManager.getInstance().getCookie(url);
        callback.invoke(cookie);
    }

    @ReactMethod
    public void removeAllCookies() {
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
            CookieManager.getInstance().removeAllCookies(new ValueCallback() {
                @Override
                public void onReceiveValue(Boolean value) {
                }
            });
        } else {
            CookieManager.getInstance().removeAllCookie();
        }
    }

react-native-cookiemanager ios端关键代码

RCT_EXPORT_METHOD(setCookie:(NSDictionary *)props) {
    NSString *name = [RCTConvert NSString:props[@"name"]];
    NSString *value = [RCTConvert NSString:props[@"value"]];
    NSString *domain = [RCTConvert NSString:props[@"domain"]];
    NSString *origin = [RCTConvert NSString:props[@"origin"]];
    NSString *path = [RCTConvert NSString:props[@"path"]];
    NSDate *expiration = [RCTConvert NSDate:props[@"expiration"]];

    NSMutableDictionary *cookieProperties = [NSMutableDictionary dictionary];
    [cookieProperties setObject:name forKey:NSHTTPCookieName];
    [cookieProperties setObject:value forKey:NSHTTPCookieValue];
    [cookieProperties setObject:domain forKey:NSHTTPCookieDomain];
    [cookieProperties setObject:origin forKey:NSHTTPCookieOriginURL];
    [cookieProperties setObject:path forKey:NSHTTPCookiePath];
    [cookieProperties setObject:expiration forKey:NSHTTPCookieExpires];

    NSHTTPCookie *cookie = [NSHTTPCookie cookieWithProperties:cookieProperties];
    [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookie];
}


RCT_EXPORT_METHOD(clearAll:(RCTResponseSenderBlock)callback) {
    NSHTTPCookieStorage *cookieStorage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
    for (NSHTTPCookie *c in cookieStorage.cookies) {
        [cookieStorage deleteCookie:c];
    }
    callback(@"success");
}

// TODO: return a better formatted list of cookies per domain
RCT_EXPORT_METHOD(getAll:(RCTResponseSenderBlock)callback) {
    NSHTTPCookieStorage *cookieStorage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
    NSMutableDictionary *cookies = [NSMutableDictionary dictionary];
    for (NSHTTPCookie *c in cookieStorage.cookies) {
        NSMutableDictionary *d = [NSMutableDictionary dictionary];
        [d setObject:c.value forKey:@"value"];
        [d setObject:c.name forKey:@"name"];
        [d setObject:c.domain forKey:@"domain"];
        [d setObject:c.path forKey:@"path"];
        [cookies setObject:d forKey:c.name];
    }
    callback(@[cookies, @"success"]);
}

最后

在场景三中有一点笔者是有疑问的，就是当cookie值没有设置过期时间、或者设置一个已经失效的时间时，安卓端也会将这一cookie值持久化，使得再次进入应用中还能获取到。

按照一般理解，没有设置过期时间时，调用setCookie保存cookie，及将cookie持久化时，应该像ios端一样，将这一cookie值丢弃。但是在跟进调试上述代码时，在CookieManager.getInstance().setCookie处的断点进入到的是一个抽象方法，没有进入到实现中，这一疑问有待进一步研究，欢迎安卓端有经验的朋友指导。

如果觉得有帮助，可以扫描二维码对我打赏，谢谢