Wie kann der Status nach der Seitenaktualisierung unverändert bleiben?

Question

Hallo zusammen, ich versuche eine Möglichkeit zu finden, meinen Statuswert nach der Seitenaktualisierung beizubehalten. Derzeit speichere ich die Werte im lokalen Speicher und habe viele Lösungen ausprobiert, um den Benutzer angemeldet zu halten, nachdem das Neuladen der Seite immer noch nicht funktioniert. Ich bekomme dieses Problem jedes Mal, wenn ich die Seite aktualisiere. Ich wäre für jede Hilfe sehr dankbar. Vielen Dank.

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

如果会话持久化到localStorage，如下

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

那么我认为你可以从getAuth中的localStorage进行初始化，如下所示

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

  ...

如果没有会话保持在状态，则 null 是表达式的值，并以 initialValue 形式返回。