使用 nextjs 中其他页面的参数集初始化组件

Question

I have 2 components on separate pages in nextjs. The way I would like my app to work is:

1. User inputs some data on page A and clicks submit
2. A request to my backend is sent and it returns a 'accessToken', at the same time the user is redirected to page B
3. To load page B the 'accessToken' is sent to an external service to initialize the component provided by that service
4. If the user leaves the page and returns, the 'accessToken' should be still set and they should not need to re-do step 1,2 but if they request a new one then that should also be updated in page B

Below the component provided by the external service for reference:

<WebSdk
  accessToken={token}
  expirationHandler={handler}
  config={config}
  options={options}
  onMessage={messageHandler}
  onError={errorHandler}
/>

How should I store and read the access token? Do I need to use useState or useEffect ? Do I need to set a cookie or localStorage?

Answer 1

Neither useState nor useEffect is good choice for this condition.

You can use both cookies(low security) and localStorage , but I recommend using sessionStorage(it has expire time) .I