时间戳

首页 > 解决方案 > 在反应 js 中更改 url 后，登录页面显示在仪表板内

reactjs - 在反应 js 中更改 url 后，登录页面显示在仪表板内

问题描述

我正在为我的应用程序使用核心 ui 模板，其中它有一个默认的应用程序页面、仪表板页面和登录页面。我已经设置了检查用户是否登录的功能。如果没有，我将显示登录页面。用户成功登录后，我将显示仪表板页面。但是当我手动更改 url 时，我可以在仪表板页面内看到登录页面。谁能告诉我如何解决这个问题。

默认布局：

class DefaultLayout extends Component {
 constructor(props) {
  super(props);
  this.state = {};
}
render() {
const user = this.props;
console.log('user in DefaultLayout', user);
return (
  <div className="app">
    {user.authUser!=null && (<AppHeader fixed>
      <DefaultHeader />
    </AppHeader>)}
    <div className="app-body">
      {user.authUser!=null && (
        <AppSidebar fixed display="lg">
          <AppSidebarHeader />
          <AppSidebarForm />
          <AppSidebarNav navConfig={navigation} {...this.props} />
          <AppSidebarFooter />
          <AppSidebarMinimizer />
        </AppSidebar>
      )}
      <main className="main">
        <ToastContainer />
        {user.authUser!=null && (
          <AppBreadcrumb appRoutes={routes} />
        )}
        <Container fluid>
          <Switch>
            {routes.map((route, idx) => {
              return route.component ? (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}
                  render={(props) => <route.component {...props} />}
                />
              ) : null;
            })}
            <Redirect from="/" to="/dashboard" />
          </Switch>
        </Container>
      </main>
      {user.authUser!=null && (
        <AppAside fixed hidden>
          <DefaultAside />
        </AppAside>
      )}
    </div>
    {user.authUser!=null && (
      <AppFooter>
        <DefaultFooter />
      </AppFooter>
    )}
  </div>
);

} }

路线：

const routes = [
 { path: '/', exact: true, name: 'Home', component: DefaultLayout },
 { path: '/signin', exact: true, name: 'SignIn', component: SignIn },
 { path: '/dashboard', exact: true, name: 'Dashboard', component: Dashboard },
 { path: '/employee', exact: true, name: 'Employee', component: Employee },
 { path: '/agent', exact: true, name: 'Agent', component: Agent }
];

输出：

在此处输入图像描述

标签： reactjsroutes

解决方案

与其检查用户是否在任何地方都经过身份验证，不如直接检查 Switch 内部？

{routes.map((route, idx) => {
              return route.component ? (
                <Route
                  key={idx}
                  path={route.path}
                  exact={route.exact}
                  name={route.name}
                  render={props =>
                    user.authUser!=null (
                      <route.component {...props} />
                    ) : (
                      <Redirect to={{ pathname: "/login" }} />
                    )
                  }
                />
              ) : null;
            })}
            <Redirect from="/" to="/dashboard" />

推荐阅读