Javascript 如何将路由器中的组件状态传递给另一个路由器组件

我现在正在设计

前端

部件。这是我的

路由器

/

是登录页面。它检查

本地存储

中的

标记

。并且它已在

状态下
isAuthenticated

/select teams
是功能页，在让用户使用它之前，它必须首先验证
令牌

问题是。

1.应在
查询
API
之前，每次刷新
令牌
？

2.在机具
组件之间，每次VS通过状态时，将通过检查
令牌
功能装载
。哪一个是最佳实践？IMO每次读取
localStorage
都可能会减慢应用程序的速度。然而，这对我来说很容易做到，但它并不是干的
3.假设我想将
isAuthenticated
状态在
Route
之间传递给另一个
Route
。我该怎么做

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {Provider} from 'react-redux';
import {applyMiddleware, createStore} from 'redux';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import promise from 'redux-promise';
import LoginPage from "./components/loginPage";
import reducers from './reducers/index';
import SelectTeam from './components/select_teams';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/select-teams" component={SelectTeam}/>
          <Route path="/" component={LoginPage}/>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.getElementById('root'));
registerServiceWorker();

您的react应用程序应该验证令牌是否位于localstore/另一个存储上，并且您的后端必须验证令牌是否有效，因为您无法验证没有其机密的令牌是否有效

我们在我工作的公司中所做的是一个高阶组件，它接收一个函数，该函数检查令牌是否存储为道具。如果函数返回true，则呈现该组件，如果它返回true，则重定向到登录路径。该函数被称为
isAuthorized

const PrivateRoute = ({ component: Component, isAuthorized, ...otherProps }) => (
<Route
    {...otherProps}
    render={props => (
        isAuthorized() ? (<Component {...props} />) :
            (
                <Redirect to={
                    {
                        pathname: '/login',
                        state: { from: props.location },
                    }
                }
                />
            )
    )}
/>
);

现在，如果令牌不存在，它的PrivateRoute负责将用户重定向到登录

现在，如果后端重新运行401（未经授权），您应该寻找一种很好的方法将用户重定向到登录。后端是实际的令牌验证器。在我工作的公司中，我们使用axios进行ajax调用，并且我们创建了一个axios拦截器，如果后端响应返回401 http状态码，该拦截器将用户重定向到登录路径。
请耐心等待。如果我花上几天时间来理解你的答案，我会尝试更直接地回答你的问题。1） 不，你不应该。前端应该只检查令牌是否存在。这是前端的“已授权”。您应该在每次请求时验证令牌。如果发现其无效，则应返回401。若前端从后端收到401，那个么前端应该重定向到登录页面。我们使用axios拦截器来保持干燥。2） 是的，在每个路由组件（页面组件/容器）上，您应该在呈现令牌之前查看令牌是否不存在。我们使用此PrivateRoute组件使其保持干燥。如果我的操作错误，请纠正我。我现在将把我的
提升为
容器
。并让每个
遵循
状态。这样我就可以传递
道具位置了。我认为
location
是当
token
过期时用户被踢出登录页面的最后一页。因此，当用户填写
LoginForm
并成功时。他将再次
推
到最后一个已知的登录页面。我将再次询问我的组件的详细信息。非常感谢你。
const PrivateRoute = ({ component: Component, isAuthorized, ...otherProps }) => (
<Route
    {...otherProps}
    render={props => (
        isAuthorized() ? (<Component {...props} />) :
            (
                <Redirect to={
                    {
                        pathname: '/login',
                        state: { from: props.location },
                    }
                }
                />
            )
    )}
/>
);

<Switch>
    <PrivateRoute exact path="/" isAuthorized={hasToken} component={Home} />
    <PrivateRoute exact path="/list" isAuthorized={hasToken} component={List} />
    <PrivateRoute exact path="/view/:id" isAuthorized={hasToken} component={View} />
    <Route component={PageNotFound} />
</Switch>