48 lines
1.4 KiB
TypeScript
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}</>;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
};
|