Comment conserver l'état inchangé après l'actualisation de la page ?

Question

Salut à tous, j'essaie de trouver un moyen de conserver la valeur de mon statut après l'actualisation de la page. Actuellement, je stocke les valeurs dans le stockage local et j'ai essayé de nombreuses solutions pour garder l'utilisateur connecté après le rechargement de la page, cela ne fonctionne toujours pas. Cela s'arrête à chaque fois que j'actualise la page, toute aide serait grandement appréciée. Merci beaucoup.

Core.ts :

class Core {
      agv: typeof agv;
      auth: Auth;
      workflow: WorkflowApi;
      graphql: GraphQLSdk;
      fleetState: Stream<FleetState>;
      taskList: Stream<TaskList>;
      zoneList: Stream<ZoneList>;

  configuration = getConfiguration();

  url: string;

  constructor(options: Options) {
    const auth = getAuth(options);
    const graphqlUrl = `${options.host}/graphql`;
    const graphql = getSdk(new GraphQLClient(graphqlUrl, { fetch: authMiddleware({ auth, fetch: options.fetch }) }));

    const streamContext = {
      ...options,
      headers: getAuthHeaders(auth),
      getSites: () => auth.session.value?.sites || [],
    };

    this.auth = auth;
    this.workflow = getWorkflowApi({ auth }) ;
    this.graphql = graphql;
    this.fleetState = fleetState.call({
      ...options,
      headers: getAuthHeaders(auth),
      getSites: () => auth.session.value?.sites || [],
    });

    this.configuration.map.fetch = this.configuration.map.fetch.bind(async () => {
      const site = auth.session.value.sites[0];
      return graphql.map({ site }).then(({ map }) => map);
    });

    this.taskList = taskList.call(streamContext);
    this.zoneList = zoneList.call(streamContext);

    this.agv = {
      ...agv,
      graphql,
      map: this.configuration.map,
      getSites: () => auth.session.value?.sites || [],
    } as typeof agv;

    auth.session.listen(session => {
      window.localStorage.setItem('session', JSON.stringify(session));
      console.log(session);
      if (session) {
    this.configuration.map.fetch();
      }
    });
  }
}

export { Core };

Answer 1

Si la session est conservée sur localStorage, comme suit

auth.session.listen(session => {
  window.localStorage.setItem('session', JSON.stringify(session));
  ...
})

Ensuite, je pense que vous pouvez initialiser à partir de localStorage dans getAuth comme ci-dessous

function getAuth({ host, fetch }: Dependencies) {
  const session = getEventEmitter({
    initialValue: JSON.parse(window.localStorage.getItem("session")),
  });

  ...

Si aucune séance ne reste en l'état, le formulaire null 是表达式的值，并以 initialValue est renvoyé.