Оновлення (16 серпня 2019 р.)
У React-router v4 та використання React Hooks це виглядає дещо інакше. Почнемо з вашого 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>
);
}
Ми використовуємо Authбібліотеку, щоб перевірити, чи справді користувач автентифікований. Замініть це на свою функцію перевірки автентичності. Якщо так, то ми встановили isAuthenticatedпрапор true. Ми робимо це, коли наш додаток завантажується вперше. Також варто згадати, можливо, ви захочете додати знак завантаження у свій додаток під час запуску перевірки автентичності, тому ви не будете блимати сторінкою входу щоразу, коли ви оновлюєте сторінку.
Потім ми передаємо прапор на наші маршрути. Ми створюємо два типи маршрутів AuthenticatedRouteі UnauthenticatedRoute.
У AuthenticatedRoute.jsвиглядає наступним чином .
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}`}
/>}
/>
);
}
Він перевіряє, чи isAuthenticatedвстановлено значення true. Якщо це так, тоді він відтворить бажаний компонент. Якщо ні, тоді воно перенаправить на сторінку входу.
З UnauthenticatedRoute.jsіншого боку виглядає так.
export default ({ component: C, appProps, ...rest }) =>
<Route
{...rest}
render={props =>
!appProps.isAuthenticated
? <C {...props} {...appProps} />
: <Redirect to="/" />}
/>;
У цьому випадку, якщо isAuthenticatedвстановлено значення false, воно відтворить потрібний компонент. І якщо для нього встановлено значення true, він перенаправить вас на домашню сторінку.
Ви можете знайти докладні версії цього в нашому посібнику - https://serverless-stack.com/chapters/create-a-route-that-redirects.html .
Старіша версія
Прийнята відповідь правильна, але Mixins вважаються шкідливими ( https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html ) командою React.
Якщо хтось стикається з цим питанням і шукає рекомендований спосіб зробити це, я б запропонував використовувати компоненти вищого порядку замість Mixins.
Ось приклад HOC, який перевірить, чи ввійшов користувач в систему перед тим, як продовжити. А якщо користувач не ввійшов у систему, він перенаправить вас на сторінку входу. Цей компонент приймає проп isLoggedIn, який називається , що в основному є прапором, який може зберігати ваша програма для позначення, якщо користувач увійшов в систему.
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);
}
А щоб використовувати цей HOC, просто оберніть його навколо своїх маршрутів. У випадку з вашим прикладом це буде:
<Route handler={requireAuth(Todos)} name="todos"/>
Я висвітлюю цю та декілька інших тем у детальному покроковому посібнику тут - https://serverless-stack.com/chapters/create-a-hoc-that-checks-auth.html