受限导航 React Router Dom - 私有和公共路由

Question

I need to make a router system that distinguishes between authenticated and non-authenticated users.

What I want to achieve with this is that authed users can see their dashboard and personal details, but unauthed users can only see the landing page, the login form and the register form.

I currently have context management so I know whether a user is logged in or not. I just need to figure out all the redirects and routing related things.

My code is making all sorts of "strange" things. I don't really know where I have messed it up.

AppContent.js

This is where all the routing happens. AppLayout is just a layout wrapper with a header and a footer that must be visible only when logged in.

const AppContent = () => (
    <Router>
        <Switch>
            <PublicRoute component={() => (<h1>Landing page</h1>)} path='/' exact />
            <PublicRoute component={LoginPage} path='/login' exact />
            <PublicRoute component={() => (<h1>Register page</h1>)} path='/register' exact />

            <PrivateRoute component={Home} path='/dashboard' exact />
            <PrivateRoute component={Demo} path='/demo' exact />
            <PrivateRoute component={Profile} path='/profile' exact />

            <PublicRoute component={() => (<h1>not found</h1>)} path='*' />
            <PrivateRoute component={() => (<h1>not found</h1>)} path='*' />
        </Switch>
    </Router>
);

PublicRoute.js

const PublicRoute = ({ component: Component, ...rest }) => {
    const { user, isLoading } = useContext(AuthContext);

    if (isLoading) {
        return (
            <h1>Loading...</h1>
        );
    }

    return (
        <Route {...rest} render={(props) => (user ? <Redirect to='/dashboard' /> : <Component {...props} />)} />
    );
};

PrivateRoute.js

const PrivateRoute = ({ component: Component, ...rest }) => {
    const { user, isLoading } = useContext(AuthContext);

    if (isLoading) {
        return (
            <h1>Loading...</h1>
        );
    }

    return (
        <Route
            {...rest}
            render={(props) => (user ? (
                <AppLayout>
                    <Component {...props} />
                </AppLayout>
            ) : <Redirect to='/login' />)}
        />
    );
};

AuthStore.js

This is where I manage my auth context.

const AuthStore = ({ children }) => {
    const [token, setToken] = useState();
    const [user, setUser] = useState();
    const [isLoading, setIsLoading] = useState(false);

    const setUserToken = async (userToken) => {
        localStorage.setItem('token', userToken);
        setToken(userToken);
        try {
            const decodedToken = jwtDecode(userToken);
            const currentUserData = await AuthService.getUserData(decodedToken.username);
            setUser(currentUserData);
        } catch (error) {
            console.log(error.name);
        }
    };

    useEffect(() => {
        setIsLoading(true);
        const localToken = localStorage.getItem('token');
        if (localToken) {
            setUserToken(localToken);
        }
        setIsLoading(false);
    }, []);

    return (
        <AuthContext.Provider value={{
            user, token, setUserToken, setUser, isLoading,
        }}
        >
            {children}
        </AuthContext.Provider>
    );
};

Thank you so much.

EDIT

What I am really looking for: When Unauthorized:

• When searching for /dashboard , redirect to /login ✅
• When searching for non existing route, redirect to /login ✅
• When searching for another unauthorized route like /register , redirect to it fine ✅

When Authorized:

• When searching for /login , redirect to /dashboard ✅
• When searching for non existing route, redirect to a 404 page, preferably one of the two last routes, the ones that look like <PrivateRoute component={() => (<h1>not found</h1>)} path='*' ✅
• When searching for another authorized route like /profile , redirect to it fine ❌ ➡️ It is currently reloading the routes, showing the login page and after half a second it shows /dashboard , but not /profile

Answer 1

According to React Router documentation, direct children of <Switch> component can only be <Route> or <Redirect> components from react-router-dom package.

All children of a <Switch> should be <Route> or <Redirect> elements. Only the first child to match the current location will be rendered.

Your <AppLayout /> component is the problem. Remove it from <Switch> and move it inside your auth pages.

edit

your auth provider is going trough async flow anytime you type in a new address in the browser and press enter, meaning every time you will have a state in your app where user is not logged in, then the components that are consuming this state are reacting to your change. also in the effect you should await setUserToken because loading is set to false before that async function resolves.

the last thing that is not working on your list is because you coded it like that;), your public route redirects all calls it receives to the /dashboard if there is user , regardless if it should be a 404 route or existing route. i would suggest different approach. create a config where you declare if route is protected or not, then have only one AuthRoute component that will take all the props of the route, and based on this new flag and state of user in the context, do the work

const routes = [{ name: 'home', path: '/', exact: true, isProtected: false, component: Home }, { name: 'protected', path: '/dashboard', exact: true, isProtected: true, component: Dashboard }];

const AuthRoute = ({ name, path, exact, isProtected, component: Component }) => {
    const { user } = useContext(userContext);
    if (isProtected && !user) { // redirect to login }
    if (!isProtected || (isProtected && user)) { // render route with props }

}

///...

<Switch>
   {routes.map(route => <AuthRoute {...route} />
</Switch>

Answer 2

I was facing the same problems just 3 to 4 days back when a very kind person who is just amazing, helped me out on the reactiflux server of discord. You might be trying to go to one protected route and that would work but the other protected route will not work right?? All you have to do is create a Higher Order Component (HOC) in a separate file which you can maybe call protectedRoute.js and inside this file:

import React, { useState, useEffect } from "react";
import { Redirect } from "react-router-dom";

export function protectedRoute(Component) {
  return function ComponentCheck(props) {
    const [check, setCheck] = useState(false);
    const [currentUser, setCurrentUser] = useState(false);

    useEffect(() => {
      const user = false;
      setCurrentUser(user);
      setCheck(true);
    }, []);

    const RedirectToLogin = <Redirect to="/" />;

    return check && (currentUser ? <Component {...props} /> : RedirectToLogin);
  };
}

In the above file the '/' route in my case is the login page but instead of const RedirectToLogin = <Redirect to='/' /> you can say const RedirectToLogin = <Redirect to='/login' />

and then you can restrict a route like for example I want the /users route to be accessible only if user === true . So for that i can in the users.js file say:

import { protectedRoute } from "./protectedRoute";

const Users = () => {
  return <h2>Users</h2>;
};

export default protectedRoute(Users);

and then I also want the /dashboard route to be protected so:

import { protectedRoute } from "./protectedRoute";

const Dashboard = () => {
  return <h2>Dashboard</h2>;
};

export default protectedRoute(Dashboard);

but I dont want the /home route to be protected so:

const Home = () => {
  return <h2>Home</h2>;
};

export default Home;