ruidy/MERN_sample_app
1
0
Fork 0
mirror of https://github.com/rjNemo/MERN_sample_app synced 2026-06-11 19:16:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use redux for PrivateRoute

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-24 20:47:53 +02:00
parent 93b32e901e
commit 4174ad81fd
4 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
client/src/components/App/index.jsx
View file

@ -6,18 +6,18 @@ import MainRouter from "../../routes";
const App = () => { const App = () => {
// for testing only. Transfer Session to store. // for testing only. Transfer Session to store.
const [authUser, setAuthUser] = useState(null); // const [authUser, setAuthUser] = useState(null);
const firebase = useFirebase(); // const firebase = useFirebase();
useEffect(() => { // useEffect(() => {
firebase.auth.onAuthStateChanged((authUser) => // firebase.auth.onAuthStateChanged((authUser) =>
authUser ? setAuthUser(authUser) : setAuthUser(null) // authUser ? setAuthUser(authUser) : setAuthUser(null)
); // );
}, [firebase.auth]); // }, [firebase.auth]);
return ( return (
<Router> <Router>
<MainNavbar authUser={authUser} /> <MainNavbar />
<MainRouter /> <MainRouter />
</Router> </Router>
); );

17
client/src/components/MainNavbar/index.jsx
View file

@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import PropTypes from "prop-types";
import { import {
Collapse, Collapse,
Container, Container,
@ -12,16 +11,16 @@ import {
NavItem, NavItem,
NavLink, NavLink,
} from "reactstrap"; } from "reactstrap";
import { selectLoggedIn, getAuthUserAsync } from "../../store/sessionSlice";
import SignOutButton from "../SignOutButton"; import SignOutButton from "../SignOutButton";
import * as ROUTES from "../../constants/routes"; import * as ROUTES from "../../constants/routes";
import { selectLoggedIn, getAuthUserAsync } from "../../store/sessionSlice";
//{ authUser }
const MainNavbar = () => { const MainNavbar = () => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen); const toggle = () => setIsOpen(!isOpen);
const authUser = useSelector(selectLoggedIn); //fetch logIn status from store
const isAuthenticated = useSelector(selectLoggedIn);
const dispatch = useDispatch(); const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
@ -32,12 +31,12 @@ const MainNavbar = () => {
<Navbar color="dark" dark expand="sm"> <Navbar color="dark" dark expand="sm">
<Container> <Container>
<NavbarBrand> <NavbarBrand>
<Link to={authUser ? ROUTES.APP : ROUTES.LANDING}>App</Link> <Link to={isAuthenticated ? ROUTES.APP : ROUTES.LANDING}>App</Link>
</NavbarBrand> </NavbarBrand>
<NavbarToggler onClick={toggle} /> <NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar> <Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar> <Nav className="ml-auto" navbar>
{authUser && ( {isAuthenticated && (
<NavItem> <NavItem>
<NavLink> <NavLink>
<Link to={ROUTES.ACCOUNT}>Account</Link> <Link to={ROUTES.ACCOUNT}>Account</Link>
@ -60,7 +59,7 @@ const MainNavbar = () => {
</NavItem> </NavItem>
<NavItem> <NavItem>
<NavLink> <NavLink>
{authUser ? ( {isAuthenticated ? (
<SignOutButton /> <SignOutButton />
) : ( ) : (
<Link to={ROUTES.SIGN_IN}>Sign In</Link> <Link to={ROUTES.SIGN_IN}>Sign In</Link>
@ -74,8 +73,4 @@ const MainNavbar = () => {
); );
}; };
MainNavbar.propTypes = {
authUser: PropTypes.any.isRequired,
};
export default MainNavbar; export default MainNavbar;

38
client/src/routes/PrivateRoute.jsx
View file

@ -2,6 +2,12 @@ import React, { useEffect, useState } from "react";
import { withRouter, Route } from "react-router-dom"; import { withRouter, Route } from "react-router-dom";
import { useFirebase } from "../services/auth"; import { useFirebase } from "../services/auth";
import * as ROUTES from "../constants/routes"; import * as ROUTES from "../constants/routes";
import { useSelector, useDispatch } from "react-redux";
import {
selectAuthUser,
getAuthUserAsync,
selectLoggedIn,
} from "../store/sessionSlice";
const PrivateRoute = ({ const PrivateRoute = ({
component: Component, component: Component,
@ -10,21 +16,31 @@ const PrivateRoute = ({
history, history,
...rest ...rest
}) => { }) => {
const [authUser, setAuthUser] = useState(null); // const [authUser, setAuthUser] = useState(null);
const firebase = useFirebase(); // const firebase = useFirebase();
const authUser = useSelector(selectAuthUser);
const dispatch = useDispatch();
useEffect(() => { useEffect(() => {
firebase.auth.onAuthStateChanged((authUser) => { // dispatch(getAuthUserAsync())
if (!condition(authUser)) {
history.push(ROUTES.SIGN_IN); if (!condition(authUser)) {
} else { history.push(ROUTES.SIGN_IN);
setAuthUser(authUser); }
} // else {
}); // setAuthUser(authUser);
}, [firebase.auth, condition, history]); // }
}, [
// firebase.auth,
condition,
history,
]);
const render = (props) => <Component {...props} />; const render = (props) => <Component {...props} />;
return authUser ? <Route path={path} render={render} {...rest} /> : null; return condition(authUser) ? (
<Route path={path} render={render} {...rest} />
) : null;
}; };
export default withRouter(PrivateRoute); export default withRouter(PrivateRoute);

1
client/src/store/sessionSlice.js
View file

@ -57,6 +57,7 @@ export const getAuthUserAsync = () => async (dispatch) => {
export const { getAuthUser, getToken, logIn, logOut } = sessionSlice.actions; export const { getAuthUser, getToken, logIn, logOut } = sessionSlice.actions;
// selectors
export const selectAuthUser = (state) => state.session; export const selectAuthUser = (state) => state.session;
export const selectLoggedIn = (state) => state.session.loggedIn; export const selectLoggedIn = (state) => state.session.loggedIn;