Browse Source

Added authenticated routes

vietnamkong 7 years ago
parent
commit
49c283143c

+ 8 - 3
frontend/app/js/views/App/index.jsx

@@ -8,6 +8,7 @@ import Menu from "components/Global/Menu";
 
 import io from "../../io";
 import config from "../../../../config/default";
+import AuthRoute from "../Auth/AuthRoute";
 
 const asyncComponent = getComponent => {
 	return class AsyncComponent extends React.Component {
@@ -22,6 +23,7 @@ const asyncComponent = getComponent => {
 				});
 			}
 		}
+
 		render() {
 			const { Component } = this.state; // eslint-disable-line no-shadow
 			if (Component) return <Component { ...this.props } />;
@@ -59,26 +61,29 @@ export default class App extends Component { // eslint-disable-line react/no-mul
 				<Menu />
 				<div>
 					<Switch>
-						<Route
+						<AuthRoute
 							exact
 							path="/login"
 							component={ asyncComponent(() =>
 								System.import("views/Auth/Login").then(module => module.default)
 							) }
+							authRequired={ false }
 						/>
-						<Route
+						<AuthRoute
 							exact
 							path="/logout"
 							component={ asyncComponent(() =>
 								System.import("views/Auth/Logout").then(module => module.default)
 							) }
+							authRequired={ true }
 						/>
-						<Route
+						<AuthRoute
 							exact
 							path="/register"
 							component={ asyncComponent(() =>
 								System.import("views/Auth/Register").then(module => module.default)
 							) }
+							authRequired={ false }
 						/>
 						<Route
 							exact

+ 35 - 0
frontend/app/js/views/Auth/AuthRoute.jsx

@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { Redirect, Route } from "react-router-dom";
+
+@connect(state => ({
+	loggedIn: state.app.get("loggedIn"),
+}))
+
+export default class AuthRoute extends Component {
+	static propTypes = {
+		loggedIn: PropTypes.bool,
+		authRequired: PropTypes.bool,
+		component: PropTypes.oneOfType([
+			PropTypes.element,
+			PropTypes.func,
+		]),
+	}
+
+	static defaultProps = {
+		loggedIn: false,
+		authRequired: true,
+		component: () => {},
+	}
+
+	render() {
+		const { authRequired } = this.props;
+		if (this.props.loggedIn) {
+			if (authRequired) return <Route props={ this.props } component={ this.props.component } />;
+			return <Redirect to={ "/" } />;
+		}
+		if (authRequired) return <Redirect to={ "/login" } />;
+		return <Route props={ this.props } component={ this.props.component } />;
+	}
+}

+ 0 - 5
frontend/app/js/views/Auth/Login.jsx

@@ -5,11 +5,6 @@ import io from "../../io";
 import config from "../../../../config/default";
 
 export default class Login extends Component {
-	static propTypes = {
-		password: PropTypes.string,
-		email: PropTypes.string,
-	}
-
 	constructor() {
 		super();
 

+ 0 - 7
frontend/app/js/views/Auth/Register.jsx

@@ -5,13 +5,6 @@ import io from "../../io";
 import config from "../../../../config/default";
 
 export default class Register extends Component {
-	static propTypes = {
-		password: PropTypes.string,
-		username: PropTypes.string,
-		email: PropTypes.string,
-		recaptcha: PropTypes.string,
-	}
-
 	constructor() {
 		super();
 

+ 5 - 0
frontend/app/js/views/Home/index.jsx

@@ -13,6 +13,11 @@ export default class Home extends Component {
 		dispatch: PropTypes.func,
 	}
 
+	static defaultProps = {
+		counter: 0,
+		dispatch: () => {},
+	}
+
 	constructor() {
 		super();