Update (16. August 2019)
In React-Router v4 und mit React Hooks sieht dies etwas anders aus. Beginnen wir mit Ihrem App.js.
export default function App() {
const [isAuthenticated, userHasAuthenticated] = useState(false);
useEffect(() => {
onLoad();
}, []);
async function onLoad() {
try {
await Auth.currentSession();
userHasAuthenticated(true);
} catch (e) {
alert(e);
}
}
return (
<div className="App container">
<h1>Welcome to my app</h1>
<Switch>
<UnauthenticatedRoute
path="/login"
component={Login}
appProps={{ isAuthenticated }}
/>
<AuthenticatedRoute
path="/todos"
component={Todos}
appProps={{ isAuthenticated }}
/>
<Route component={NotFound} />
</Switch>
</div>
);
}
Wir verwenden eine AuthBibliothek, um zu überprüfen, ob der Benutzer derzeit authentifiziert ist. Ersetzen Sie dies durch Ihre Auth-Check-Funktion. Wenn ja, setzen wir das isAuthenticatedFlag auf true. Wir tun dies, wenn unsere App zum ersten Mal geladen wird. Erwähnenswert ist auch, dass Sie Ihrer App möglicherweise ein Ladeschild hinzufügen möchten, während die Authentifizierungsprüfung ausgeführt wird, damit Sie die Anmeldeseite nicht jedes Mal flashen, wenn Sie die Seite aktualisieren.
Dann geben wir die Flagge an unsere Routen weiter. Wir erstellen zwei Arten von Routen AuthenticatedRouteund UnauthenticatedRoute.
Das AuthenticatedRoute.jssieht so aus.
export default function AuthenticatedRoute({ component: C, appProps, ...rest }) {
return (
<Route
{...rest}
render={props =>
appProps.isAuthenticated
? <C {...props} {...appProps} />
: <Redirect
to={`/login?redirect=${props.location.pathname}${props.location.search}`}
/>}
/>
);
}
Es wird geprüft, ob eingestellt isAuthenticatedist true. Wenn dies der Fall ist, wird die gewünschte Komponente gerendert. Wenn nicht, wird zur Anmeldeseite weitergeleitet.
Das UnauthenticatedRoute.jssieht dagegen so aus.
export default ({ component: C, appProps, ...rest }) =>
<Route
{...rest}
render={props =>
!appProps.isAuthenticated
? <C {...props} {...appProps} />
: <Redirect to="/" />}
/>;
In diesem Fall wird die gewünschte Komponente gerendert , wenn auf gesetzt isAuthenticatedist false. Und wenn es auf true gesetzt ist, werden Sie zur Startseite weitergeleitet.
Detaillierte Versionen davon finden Sie in unserem Handbuch - https://serverless-stack.com/chapters/create-a-route-that-redirects.html .
Ältere Version
Die akzeptierte Antwort ist korrekt, aber Mixins werden vom React-Team als schädlich eingestuft ( https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html ).
Wenn jemand auf diese Frage stößt und nach der empfohlenen Methode sucht, würde ich vorschlagen, Komponenten höherer Ordnung anstelle von Mixins zu verwenden.
Hier ist ein Beispiel für ein HOC, das prüft, ob der Benutzer angemeldet ist, bevor Sie fortfahren. Wenn der Benutzer nicht angemeldet ist, werden Sie zur Anmeldeseite weitergeleitet. Diese Komponente verwendet eine Requisite namens isLoggedIn, dh ein Flag, das Ihre Anwendung speichern kann, um anzuzeigen, ob der Benutzer angemeldet ist.
import React from 'react';
import { withRouter } from 'react-router';
export default function requireAuth(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount() {
this.checkAuth();
}
checkAuth() {
if ( ! this.props.isLoggedIn) {
const location = this.props.location;
const redirect = location.pathname + location.search;
this.props.router.push(`/login?redirect=${redirect}`);
}
}
render() {
return this.props.isLoggedIn
? <Component { ...this.props } />
: null;
}
}
return withRouter(AuthenticatedComponent);
}
Und um dieses HOC zu verwenden, wickeln Sie es einfach um Ihre Routen. In Ihrem Beispiel wäre es:
<Route handler={requireAuth(Todos)} name="todos"/>
Ich beschreibe dieses und einige andere Themen in einem detaillierten Schritt-für-Schritt-Tutorial hier - https://serverless-stack.com/chapters/create-a-hoc-that-checks-auth.html