在服务器端渲染（节点/ Express）中反应Cookie

Question

I have a React server side rendered web application.

When the user requests "myapp.com/data" I have a Node Express wildcard route set up to catch that request. Inside that route handler, I create a Redux store for the server and then render

app.get("/*", (req, res) => {
const content = renderToString(
    <Provider store={store}>
      <StaticRouter location={req.path} context={{}}>
        <Routes />
      </StaticRouter>
    </Provider>
  );
// send a bunch of HTML to client with {content} inside the React root div
}

Obviously I have client side code to hydrate the content. I create a different store for the client side, but I don't think that's relevant to the question.

const store = createStore(
  reducers,
  {},
  composeEnhancers(applyMiddleware(thunk))
);

const jsx = (
  <Provider store={store}>
    <BrowserRouter>
      <Routes />
    </BrowserRouter>
  </Provider>
);

ReactDOM.hydrate(jsx, document.querySelector("#react-root"));

I have a service set up to do all the fetching and setting of the cookie, using "universal-cookie".

import Cookie from "universal-cookie";
...
...
login(args) {
    const cookie = new Cookie();
    return new Promise((resolve, reject) => {
      fetch(`${apiURLs.login}`, {
        method: "post",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(args)
      })
        .then(response => {
          if (response.status !== 200)
            throw { status: response.status, message: response.message };
          return response.json();
        })
        .then(json => {
          cookie.set("authToken", json.authToken);
          resolve(json);
        })
        .catch(error => {
          reject(error);
        });
    });
  }

This all works fine.

Inside my client side code, I've created a component.

import Cookie from "universal-cookie";
...
...
const PrivateRoute = ({ component: Component, ...rest }) => {
  const cookie = new Cookie();
  const authToken = cookie.get("authToken");
  console.log("Auth Token inside <PrivateRoute /> = ");
  console.log(authToken);
  return (
    <Route
      {...rest}
      render={props => {
        return AuthService.checkToken("authToken").then(response => {
          return response.success;
        }) === true ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: {
                referrer: props.location
              }
            }}
          />
        );
      }}
    />
  );
};

THE PROBLEM (tl;dr):

const authToken = cookie.get("authToken");
console.log("Auth Token inside <PrivateRoute /> = ");
console.log(authToken);

Inside my PrivateRoute component, the auth token logs 'undefined' on the server-generated code and returns the correct value on the client side.

Answer 1

How universal-cookie lib gets the cookies? From the docs, you need to pass it the cookie header to the constructor.

// Server Example
import Cookies from 'universal-cookie';

const cookies = new Cookies(req.headers.cookie);

console.log(cookies.get('myCat')); // Pacman or undefined if not set yet

I would suggest you to refactor this code so your component won't know the source of the data (cookie).

One common option is to put it on the redux store when ever you create the store (can be on the initial store as well).

With this approach you will need to read the cookie on client-side (when initialising the store in this case read the cookie from document.cookie) & in server-side (when initialising the store, in this case read it from request object).