colouring-montreal/app/src/frontend/route.tsx
2021-02-08 16:03:30 +00:00

48 lines
1.4 KiB
TypeScript

import React from 'react'
import { Route, RouteProps, Redirect } from 'react-router-dom';
import { useAuth } from './auth-context';
export const PrivateRoute: React.FC<RouteProps> = ({component: Component, children, ...rest}) => {
const { isAuthenticated } = useAuth();
return <Route
{...rest}
render={props => {
if(isAuthenticated) {
if(Component) {
return <Component {...props} />;
} else if(children) {
return <>{children}</>;
}
} else {
return <Redirect to={{
pathname: "/login.html",
state: { from: props.location.pathname }
}} />;
}
}}
/>
};
export const AuthRoute: React.FC<RouteProps> = ({ component: Component, children, ...rest}) => {
const { isAuthenticated } = useAuth();
return <Route
{...rest}
render={props => {
if(isAuthenticated) {
const { from } = props.location.state ?? { from: '/my-account.html'};
return <Redirect to={{pathname: from }} />;
} else {
if(Component) {
return <Component {...props} />;
} else if(children) {
return <>{children}</>;
}
}
}}
/>
};