如何在 React Native 中使用 Expo 设置 cookie？

Question

I am having a hard time getting cookies to work, on the server side I use them to verify the user by grabbing them from req.cookies.

Here is how I currently set it on the Login.js file in React Native:

import Cookies from "universal-cookie";

const cookies = new Cookies();
 cookies.set("token", token, {
                expires: 7, // 7 days
                path: "/"
                //,secure: true // If served over HTTPS
   });

This works fine when I call a cookies.get("token") on this page. However, when I import, setup the const, and call get on another page the token does not show up...

Also, when I make the fetch like this:

fetch("http://192.168.0.115:3000/myTransactions/", {
      credentials: "same-origin",
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })

The server does not receive any cookies. I even changed credentials to say include.

I am using expo and my terminal on Windows to run it without having to use android studio or xcode. I am not sure if that is a possible issue.

Any thoughts!

Thanks

Answer 1

A couple things... react-native-keychain... safer than cookies! https://github.com/oblador/react-native-keychain

Second, have you tried AsyncStorage? This is React-natives built in "localStorage" in essence. I think it's what you're looking for.

https://facebook.github.io/react-native/docs/asyncstorage.html

    // to set
AsyncStorage.setItem('@app:session', token);

// to get
AsyncStorage.getItem('@app:session').then(token => {
  // use token
});

UPDATES for OP If your setup looks like this, where you simply are sending the token value through as headers, you can store this information in whatever format is... safest/most convenient. In this example, auth could be either of these options fetched....

localStorage.set('token', 38573875ihdkhai)
createCookie('ppkcookie' 7asdfasdf);

export const userFetchRequest = () => (dispatch, getState) => {
  let {auth} = getState();
  return superagent.get(`${__API_URL__}/user/me`)
    .set('Authorization', `Bearer ${auth}`)
    .then(res => {
      dispatch(userSet(res.body));
      return res;
    });
};

Answer 2

You can use cookies or just store a token in a localStorage for the web app.

But for the React Native app usage of AsyncStorage would be the better solution.

About AsyncStorage :

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.

Also, AsyncStorage has quite simple API:

const TOKEN = "TOKEN";

// save token
AsyncStorage.setItem(TOKEN, token);

// get token
AsyncStorage.getItem(TOKEN).then(token => {
  // token value could be used
});

If you are bothering about AsyncStorage security you can find more information by the link .