Issue #49: Adicionar segurança nas rotas

Signed-off-by: Gabriel Silva Hermida <gash18@inf.ufpr.br>

src/App.js

 import React from "react";
-import { HashRouter, Route, Redirect } from "react-router-dom";
 import "./global.css";
-import CreateForm from "./pages/CreateForm";
-import AnswerForm from "./pages/AnswerForm";
-import Header from "./components/header/header";
-import Footer from "./components/footer/footer";
-import SignUp from "./pages/SignUp";
-import SignIn from "./pages/SignIn";
-import ListForms from "./pages/ListForms";
-import EditForm from "./pages/EditForm";
-import GetForm from "./pages/GetForm";
-import VisualizeForm from "./pages/VisualizeForm";
+import Routes from "./routes";
+import { BrowserRouter as Router } from "react-router-dom";
 function App() {
   return (
-    <HashRouter>
-      <Header />
-      <Route exact path="/">
-        <Redirect to="/SignIn" />
-      </Route>
-      <Route path="/SignUp" component={SignUp} />
-      <Route path="/SignIn" component={SignIn} />
-      <Route path="/visualize/:id" component={VisualizeForm} />
-      <Route path="/create" component={CreateForm} />
-      <Route path="/answer/:id" component={AnswerForm} />
-      <Route path="/edit/:id" component={EditForm} />
-      <Route path="/list/:id" component={ListForms} />
-      <Route path="/form/:id" component={GetForm} />
-      <Footer />
-    </HashRouter>
+    <Router>
+      <Routes />
+    </Router>
   );
 }
 

src/components/header/header.jsx

@@ -70,7 +70,6 @@ export default function Header() {
     return false;
   }
   useEffect(() => {
-    console.log("O TOKEN MUDOU");
     setIsLoged(!isLoged);
   }, [window.sessionStorage.getItem("token")]);
 

src/pages/SignUp.js

@@ -262,7 +262,6 @@ export default function SignUp() {
           </Grid>
           <Grid>
             <IconButton
-              type="submit"
               size="medium"
               className={classes.button}
               id="whiteTextedButton"

src/routes.js

+import React, { useEffect } from "react";
+import CreateForm from "./pages/CreateForm";
+import AnswerForm from "./pages/AnswerForm";
+import Header from "./components/header/header";
+import Footer from "./components/footer/footer";
+import SignUp from "./pages/SignUp";
+import SignIn from "./pages/SignIn";
+import ListForms from "./pages/ListForms";
+import EditForm from "./pages/EditForm";
+import GetForm from "./pages/GetForm";
+import VisualizeForm from "./pages/VisualizeForm";
+import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  let usr;
+  console.log(rest);
+  if (rest.path === "/list/:id") {
+    if (
+      rest.computedMatch.params.id === window.sessionStorage.getItem("userId")
+    ) {
+      usr = true;
+    }
+  }
+  return (
+    <Route
+      {...rest}
+      render={(props) =>
+        usr && window.sessionStorage.getItem("token") !== null ? (
+          <Component {...props} />
+        ) : (
+          <Redirect to={{ pathname: "/" }} />
+        )
+      }
+    />
+  );
+};
+
+const Routes = () => (
+  <BrowserRouter>
+    <Header />
+    <Switch>
+      <Route exact path="/">
+        <Redirect to="/SignIn" />
+      </Route>
+      <Route exact path="/SignUp" component={SignUp} />
+      <Route exact path="/SignIn" component={SignIn} />
+      <PrivateRoute
+        exact
+        path="/visualize/:id"
+        component={() => <VisualizeForm />}
+      />
+      <PrivateRoute exact path="/create" component={() => <CreateForm />} />
+      <PrivateRoute exact path="/answer/:id" component={() => <AnswerForm />} />
+      <PrivateRoute exact path="/edit/:id" component={() => <EditForm />} />
+      <PrivateRoute exact path="/list/:id" component={() => <ListForms />} />
+      <PrivateRoute exact path="/form/:id" component={() => <GetForm />} />
+    </Switch>
+    <Footer />
+  </BrowserRouter>
+);
+
+export default Routes;