为什么我的 localStorage 在重定向（URL 更改）时是清晰的？

Question

我正在尝试在页面之间保留数据，这是我在 URL 中收集的变量。因此，我的用户将输入如下 URL：https://my-solution/event/:identifier 我想保留该标识符，但我需要先进行身份验证。在重定向之前，我将标识符存储在本地存储或会话存储中，当我重定向到 https://my-solution/auth 时，此条目将从本地存储中消失。

一旦身份验证成功并且我将我的用户 jwt 令牌存储在同一个本地存储中，它就会持续存在！我的标识符已被删除，但我的令牌仍然存在（顺便说一句，之后存储的每个变量）；存储我的令牌后，我可以重定向我想要的所有内容，并且我的数据会保留。我不明白发生了什么事... 这是一个 create-react-app 解决方案。使用react-router 和redux。 这与我重定向的方式有关吗？我使用react-router中的

<Redirect>

，但有时也使用

windows.location.href

（在useEffect回调中）。

我确实尝试过存储像基本字符串这样的非动态变量：

localStorage.setItem("test", "mytestValue")

这个条目确实持续存在。这种行为与动态值有关吗？

我确实有一个复杂的解决方法：通过每个网址中的 location.search 传递数据，并尝试在每个组件中存储它，直到数据保留在本地存储中......但我想知道我在这里是否做错了什么。 谢谢 ！ 这是我的架构流程：

索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';

import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducers';
import thunk from 'redux-thunk';
import { signalRMiddleware } from './middlewares/signalRMiddleware';

import 'bootstrap/dist/css/bootstrap.css';
import 'primereact/resources/themes/nova/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

const store = process.env.REACT_APP_WITHOUT_SIGNALR == "true" ? createStore(reducer, applyMiddleware(thunk)) : createStore(reducer, applyMiddleware(thunk, signalRMiddleware()))
ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter basename={process.env.PUBLIC_URL}>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

应用程序.tsx

import React from 'react';
import './App.css';
import Router from './components/Router';
import moment from 'moment';
import 'moment/locale/fr';
moment().locale('fr');

function App() {
  return (
      <Router />
  );
}

export default App;

路由器索引

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import UtilsService from '../../services/utils.service';

function Router() {
    const AuthRouters = UtilsService.getRoute('/auth').component;
    const BackofficeRouters = UtilsService.getRoute('/backoffice').component;
    const EventLayout = UtilsService.getRoute('/').component;
    const MultiEventLayout = UtilsService.getRoute('/multiEvents').component;
    const ChatLayout = UtilsService.getRoute('/chat').component;
    const ChatOtoLayout = UtilsService.getRoute('/chat_oto').component;
    const QuestionsLayout = UtilsService.getRoute('/questions').component;
    const PlanningLayout = UtilsService.getRoute('/planning').component;
    const AccueilMobileLayout = UtilsService.getRoute('/accueil_mobile').component;

    return (
        <Switch>
            <Route path="/auth" render={(props: any) => <AuthRouters {...props} />} />
            <ProtectedRoute path="/backoffice" isBackoffice={true} render={(props: any) => <BackofficeRouters {...props} exact />} />
            <ProtectedRoute path="/multiEvents" isBackoffice={false} render={(props: any) => <MultiEventLayout {...props} />} />
            <ProtectedRoute path="/room/:id" isBackoffice={false} render={(props: any) => <EventLayout {...props} />} />
            <ProtectedRoute path="/event/:identifier" isBackoffice={false} render={(props: any) => <EventLayout {...props} />} />
            <ProtectedRoute path="/questions/:idButton" isBackoffice={false} render={(props: any) => <QuestionsLayout {...props} />} />
            <ProtectedRoute path="/chat_oto" isBackoffice={false} render={(props: any) => <ChatOtoLayout {...props} />} />
            <ProtectedRoute path="/chat/:id" isBackoffice={false} render={(props: any) => <ChatLayout {...props} />} />
            <ProtectedRoute path="/planning/:idEvent" isBackoffice={false} render={(props: any) => <PlanningLayout {...props} />} />
            <ProtectedRoute path="/accueil_mobile/:idEvent" isBackoffice={false} render={(props: any) => <AccueilMobileLayout {...props} />} />
            <ProtectedRoute path="/" isBackoffice={false} render={(props: any) => <EventLayout {...props} />} />
        </Switch>
    );
}

export default Router;

受保护的路由.tsx

return (
        <Route
            {...rest}
            render={props => {
                let eventUrlIdentifier = "";
                if(props.match.path === "/event/:identifier"){
                    let url = props.match.url;
                    let s = url.split("/");
                    eventUrlIdentifier = s[2];
                }
                if (!fetchAllConfLoading && isClientSettingsLoaded) {
                    //process auth anonymous
                    if (user == null) {
                        if (clientSettings.monoEventId != undefined && clientSettings.allowAnonymous != undefined) {
                            if (!clientSettings.allowAnonymous) {
                                // Redirection vers /Auth si la connexion anonyme n'est pas autorisé pour un mono-event
                                return (
                                    <Redirect to={{ pathname: '/Auth', state: { from: props.location }, search: eventUrlIdentifier }} />
                                );
                            }
                            else {
                                return (
                                    <Redirect to={{ pathname: '/auth/anonyme', state: { from: props.location }, search: eventUrlIdentifier }} />
                                );
                            }
                        }

Answer 1

会话存储和本地存储将仅保留在同一域中。如果域发生变化，则存储在其中任一者中的值将消失。解决这个问题，使用 cookie 在不同域的两个页面之间存储数据。