91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Route, Redirect, RouteProps } from 'react-router';
|
|
import { message } from 'antd';
|
|
import { AppState } from 'store/reducers';
|
|
import { authActions } from 'modules/auth';
|
|
import Loader from 'components/Loader';
|
|
|
|
interface OwnProps {
|
|
onlyLoggedOut?: boolean;
|
|
}
|
|
|
|
interface StateProps {
|
|
user: AppState['auth']['user'];
|
|
isCheckingUser: AppState['auth']['isCheckingUser'];
|
|
hasCheckedUser: AppState['auth']['hasCheckedUser'];
|
|
authForwardLocation: AppState['auth']['authForwardLocation'];
|
|
}
|
|
|
|
interface DispatchProps {
|
|
setAuthForwardLocation: typeof authActions['setAuthForwardLocation'];
|
|
}
|
|
|
|
type Props = RouteProps & StateProps & OwnProps & DispatchProps;
|
|
|
|
class AuthRoute extends React.Component<Props> {
|
|
componentDidMount() {
|
|
this.setAuthForward();
|
|
}
|
|
componentDidUpdate(prevProps: Props) {
|
|
const { hasCheckedUser } = this.props;
|
|
// in case we mounted before having checked user
|
|
if (!prevProps.hasCheckedUser && hasCheckedUser) {
|
|
this.setAuthForward();
|
|
}
|
|
}
|
|
public render() {
|
|
const {
|
|
user,
|
|
onlyLoggedOut,
|
|
isCheckingUser,
|
|
location,
|
|
authForwardLocation,
|
|
...routeProps
|
|
} = this.props;
|
|
if (isCheckingUser) {
|
|
return <Loader size="large" tip="Checking authentication status" />;
|
|
}
|
|
if ((user && !onlyLoggedOut) || (!user && onlyLoggedOut)) {
|
|
return <Route {...routeProps} />;
|
|
} else {
|
|
let newLocation = { ...location, pathname: '/auth' };
|
|
if (onlyLoggedOut) {
|
|
newLocation = authForwardLocation || { ...location, pathname: '/profile' };
|
|
}
|
|
return (
|
|
<>
|
|
<noscript className="noScript is-block">
|
|
This page requires you to login before you can access it, but you have
|
|
Javascript disabled. Please enable Javascript and login to continue.
|
|
</noscript>
|
|
<Redirect to={{ ...newLocation }} />
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
private setAuthForward = () => {
|
|
const {
|
|
setAuthForwardLocation,
|
|
location,
|
|
hasCheckedUser,
|
|
user,
|
|
onlyLoggedOut,
|
|
} = this.props;
|
|
if (hasCheckedUser && !user && !onlyLoggedOut) {
|
|
message.warn('Authorization required.');
|
|
setAuthForwardLocation(location);
|
|
}
|
|
};
|
|
}
|
|
|
|
export default connect<StateProps, DispatchProps, OwnProps, AppState>(
|
|
(state: AppState) => ({
|
|
user: state.auth.user,
|
|
isCheckingUser: state.auth.isCheckingUser,
|
|
hasCheckedUser: state.auth.hasCheckedUser,
|
|
authForwardLocation: state.auth.authForwardLocation,
|
|
}),
|
|
{ setAuthForwardLocation: authActions.setAuthForwardLocation },
|
|
)(AuthRoute);
|