当用户未登录时重定向

Question

我在App.js中具有以下路线

<Router>
                <div className="App">
                    <Layout>
                        <Route exact path="/" exact component={Main}/>
                        <Route exact path="/passwordchange/:email" component={PasswordChange}/>
                        <Route exact path="/account" component={Account}/>
                        <Route exact path="/forgot-password" component={ForgotPassword}/>
                        <Route exact path="/login" component={Login}/>
                        <Route exact path="/faq" component={FAQ}/>
                        <Route exact path="/library" component={Library}/>
                        <Route exact path="/signup" component={SignUp}/>
                        <Route exact path="/signup/:id" component={SignUp}/>
                        <Route exact path="/login/:id" component={Login}/>
                        <Route path="/books" exact component={BookSummaries}/>
                        <Route path="/home" exact component={Main}/>
                        <Route path="/pricing" exact component={Pricing}/>
                        <Route path="/books/:id" exact component={BookDetail}/>
                        <Route path="/categories/:id" exact component={Categories}/>
                        <Route path="/category/:category" exact component={BookListPage}/>
                        <Route path="/stacksocial" exact component={StackSocial}/>
                        <Route path="/booklist/:sort" exact component={BookListPage}/>
                        <Route path="/reader/:id" exact component={Reader}/>
                        <Route path="/search" exact component={BookSearch}/>
                        <Route path="/payment/:planid" exact component={Payment}/>
                    </Layout>
                </div>
            </Router>

对于某些路由，我只想在用户登录后才显示它们。使用React的最佳方法是什么？

Answer 1

最佳方法是创建一个ProtectedRoute组件，如果用户未登录，则将其重定向到某个位置，例如登录页面。

ProtectedRoute.js（这里我有一个authService来决定用户是否登录，您的用户可以不同）。

import React from "react";
import { Route, Redirect } from "react-router-dom";
import authService from "../../services/auth-service";

export const ProtectedRoute = ({
  path,
  component: Component,
  render,
  ...rest
}) => {
  return (
    <Route
      path={path}
      {...rest}
      render={props => {
        if (authService.isAuthenticated()) {
          return Component ? <Component {...props} /> : render(props);
        } else {
          return <Redirect to="/login" />;
        }
      }}
    />
  );
};

export default ProtectedRoute;

这样，您可以将此组件用于需要身份验证的路由。

<Router>
  <div className="App">
    <Layout>
      <Route exact path="/" exact component={Main} />
      <ProtectedRoute exact path="/passwordchange/:email" component={PasswordChange} />
    </Layout>
  </div>

Answer 2

假设您某处有某种isLoggedIn变量。您可以使用类似的方法来做到这一点：

<Router>
                <div className="App">
                    <Layout>
                        <Route exact path="/" exact component={Main}/>
                        <Route exact path="/passwordchange/:email" component={PasswordChange}/>
                        <Route exact path="/account" component={Account}/>
                        <Route exact path="/forgot-password" component={ForgotPassword}/>
                        <Route exact path="/login" component={Login}/>
                        <Route exact path="/faq" component={FAQ}/>
                        <Route exact path="/library" component={Library}/>
                        <Route exact path="/signup" component={SignUp}/>
                        <Route exact path="/signup/:id" component={SignUp}/>
                        <Route exact path="/login/:id" component={Login}/>
                        <Route path="/books" exact component={BookSummaries}/>
                        { isLoggedIn &&
                        <>
                          <Route path="/home" exact component={Main}/>
                          <Route path="/pricing" exact component={Pricing}/>
                          <Route path="/books/:id" exact component={BookDetail}/>
                          <Route path="/categories/:id" exact component={Categories}/>
                          <Route path="/category/:category" exact component={BookListPage}/>
                          <Route path="/stacksocial" exact component={StackSocial}/>
                          <Route path="/booklist/:sort" exact component={BookListPage}/>
                          <Route path="/reader/:id" exact component={Reader}/>
                          <Route path="/search" exact component={BookSearch}/>
                          <Route path="/payment/:planid" exact component={Payment}/>
                        </>
                      }
                    </Layout>
                </div>
            </Router>