javascript - react 私有(private)路由无限渲染 - 获取错误错误 : Maximum update depth exceeded

Question

如果用户已授权，我将尝试在私有(private)路由中呈现我的组件。但我一直收到错误。 错误:超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

要查看用户是否已授权，我从 localStorage 获取 token 。

注释行 const authed = true 用于测试目的，并且有效。

我的路由组件如下所示:

import React from 'react';
import { Switch, Redirect, Route } from 'react-router-dom';

import { RouteWithLayout } from './components';
import { Main as MainLayout, Minimal as MinimalLayout} from './layouts';

import {
  Dashboard as DashboardView,
  ProductList as ProductListView,
  UserList as UserListView,
  Typography as TypographyView,
  Icons as IconsView,
  Account as AccountView,
  Settings as SettingsView,
  NotFound as NotFoundView,
  Login as LoginView,
} from './views';

const Routes = () => {
  const authed = !!localStorage.getItem('token');
  //const authed = true;

  return (
    <Switch>
      <RouteWithLayout authed={authed} component={LoginView} exact layout={MinimalLayout} path="/login" />
      <Redirect exact from="/" to="/login" />
      {/*authed={this.state.authed}*/}
      <RouteWithLayout authed={authed} component={DashboardView} exact layout={MainLayout} path="/dashboard" />{' '}
      <RouteWithLayout authed={authed} component={UserListView} exact layout={MainLayout} path="/users" />
      <RouteWithLayout authed={authed} component={ProductListView} exact layout={MainLayout} path="/products" />
      <RouteWithLayout authed={authed} component={TypographyView} exact layout={MainLayout} path="/typography" />
      <RouteWithLayout authed={authed} component={IconsView} exact layout={MainLayout} path="/icons" />
      <RouteWithLayout authed={authed} component={AccountView} exact layout={MainLayout} path="/account" />
      <RouteWithLayout authed={authed} component={SettingsView} exact layout={MainLayout} path="/settings" />
      <RouteWithLayout authed={authed} component={NotFoundView} exact layout={MinimalLayout} path="/not-found" />
      <Redirect to="/not-found" />
    </Switch>
  );
};

export default Routes;

我的 RouteWithLayout 看起来像:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';

const RouteWithLayout = props => {
  const { authed, layout: Layout, component: Component, ...rest } = props;

  return (
    <Route
      {...rest}
      render={matchProps =>
        authed === true ? (
          <Layout>
            <Component {...matchProps} />
          </Layout>
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  );
};

RouteWithLayout.propTypes = {
  authed: PropTypes.any,
  component: PropTypes.any.isRequired,
  layout: PropTypes.any.isRequired,
  path: PropTypes.string,
  props: PropTypes.any.isRequired,
};

export default RouteWithLayout;

Answer 1

看起来如果 auth === false，您将无限重定向，因为 /login 路由使用 RouteWithLayout。

给定 auth === false:

1. 导航到/login
2. 使用了RouteWithLayout逻辑
3. 如果 auth 不正确，重定向到/login

这些步骤会一遍又一遍地重复，因此您需要一个特殊情况的登录路由 - 许多不同的方法来实现它。

旁注:您的仪表板路线后有一个偏离 {' '}。

另一个旁注:您可能仍在研究这部分，但值得一提的是，这是非常不安全的:const authed = !!localStorage.getItem('token'); 该代码意味着任何非虚假值都将被接受为有效 token ，这意味着我可以手动将虚拟 token 添加到 localStorage 并进行身份验证。