How to redirect to dashboard based on user roles in ReactJS

Question

I have two components 1 is adminRoutes which displays admindashboard and the other is Userdashboard which shows userDashboard, below are screenshots of admin and user dashboards

user dashboard, admin dashboard

What I did here is after successfull login i navigate to ("/") which returns <Home/> component that is my admin dashboard. Below is the code of login. When login button is clicked, the useEffect is fired.

useEffect(() => {
    if (Object.keys(formErrors).length === 0 && isSubmit) {
        signInWithEmailAndPassword(auth, UserLogin.email, UserLogin.password)
            .then((userCredential) => {
                // Signed in 
                const user = userCredential.user
                const docRef = doc(db, 'admin', user.uid)
                getDoc((docRef)).then((doc) => {
                    localStorage.setItem('currentuser', JSON.stringify(doc.data()));
                });
                dispatch({
                    type: "LOGIN",
                    payload: user
                })
                navigate("/user/");
            })
            .catch((error) => {
                setError(error);
                setInterval(() => {
                    setError();
                }, 4000)
            });
    }
}, [formErrors])

Here I am saving my currentUser from firebase to localStorage, user object has properties email, id, name, role and based on the role I want to switch admindashboard or userdashboard while I am logging in.

Here is the main App component code

function App (){
    return (
        <>
            <UserRoutes/>
        </>
    )
}

export default App;

And below is AdminRoutes component that has different routes for admindashboard pages

import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import UserDashboard from "../../UserDashBoard/UserDashboard";

export default function AdminRoutes() {
    const { currentUser } = useContext(AuthContext);
    const RequireAuth = ({ children }) => {
        return currentUser ? children : <Navigate to={"/Login"} />;
    };

    return (
        <>
            <Router>
                <Routes>
                    <Route path="/">
                        <Route path="Login" element={<Login />} />
                        <Route path="Signup" element={<Signup />} />
                        <Route
                            index
                            element={
                                <RequireAuth>
                                    <Home />
                                </RequireAuth>
                            }
                        />
                        <Route path="user">
                            <Route
                                index
                                element={
                                    <RequireAuth>
                                        <UserList />
                                    </RequireAuth>
                                }
                            />
                            <Route
                                path=":userid"
                                element={
                                    <RequireAuth>
                                        <User />
                                    </RequireAuth>
                                }
                            />
                        </Route>
                        <Route path="documents">
                            <Route
                                index
                                element={
                                    <RequireAuth>
                                        <Document />
                                    </RequireAuth>
                                }
                            />
                        </Route>
                        <Route path="createcategory">
                            <Route
                                index
                                element={
                                    <RequireAuth>
                                        <CreateCategory />
                                    </RequireAuth>
                                }
                            />
                        </Route>
                        <Route path="viewuser">
                            <Route
                                index
                                element={
                                    <RequireAuth>
                                        <UserList />
                                    </RequireAuth>
                                }
                            />
                        </Route>
                        <Route path="uploaddoc">
                            <Route
                                index
                                element={
                                    <RequireAuth>
                                        <Upload />
                                    </RequireAuth>
                                }
                            />
                        </Route>
                        <Route path="createuser">
                            <Route
                                index
                                element={
                                    <RequireAuth>
                                        <CreateUser />
                                    </RequireAuth>
                                }
                            />
                        </Route>
                        <Route path="Viewdocuments">
                            <Route
                                index
                                element={
                                    <RequireAuth>
                                        <Document />
                                    </RequireAuth>
                                }
                            />
                        </Route>
                    </Route>
                </Routes>
            </Router>
        </>
    );
}

Based on Roles I want to show Dashboard. If admin logged in show admin dashboard, if user logged in show userdashboard. How can I achieve it? I am still learning reactjs. Thank You.

deaponn · Answer 1 · 2022-08-15T09:53:41.553

0

Edit after clarifying what OP wants to achieve: You need to add context and then make routing based on data in it.

// in the App.js, wrap your components with Context so it is accessible
function App (){
    return (
        <AuthContext.Provider>
            <UserRoutes/>
        </AuthContext.Provider>
    )
}

export default App;

In component UserRoutes:

const { currentUser } = useContext(AuthContext);
const RequireAuth = ({ children }) => {
    return currentUser ? children : <Navigate to={"/Login"} />;
};

if (currentUser.role === "admin") return ( { /* user is admin, return routes for admin */ }
    <Router>
        <Routes>
            { /* all the routes for user admin, ex. */ }
            <Route path="admindashboard" element={<AdminDashboard />} />
        </Routes>
    </Router>
)

return ( { /* user is regular user, return routes for user */ }
    <Router>
        <Routes>
            { /* all the routes for user, ex. */ }
            <Route path="user-dashboard" element={<UserDashboard />} />
        </Routes>
    </Router>
)

edited Aug 15 '22 at 09:53

answered Aug 14 '22 at 12:51

deaponn

837
2
12

Actually there is no Routes component, it is AdminRoutes i.e my admindashboard and i if am not wrong calling same component inside it – alex Aug 14 '22 at 13:13
You have `Routes` component used inside of your `AdminRoutes` component. There is also `UserDashboard` imported in the same file, so I assumed that you want to display this component inside of `AdminRoutes`. – deaponn Aug 14 '22 at 13:19
no its my bad , Actually i have two components adminRoutes and UserRoutes which are both dashboard for different user .now i want to render these component based on logged in user when someone logged in and the function return currentuserobj and there is role property which can be 'admin' or 'user' if admin then render AdminRoutes component & if role is User render UserROutes component. – alex Aug 14 '22 at 13:27
I have edited my answer, take a loook :) – deaponn Aug 15 '22 at 01:10
the useEffect cannot be called inside app js it is the part of loginComponent ,however i tried the code below the useEffect inside the appjs its not working – alex Aug 15 '22 at 06:25
I have modified my answer – deaponn Aug 15 '22 at 09:54
thankyou for your time .but it still not fixed cause still a lot of thing going on the the other component – alex Aug 16 '22 at 06:29

How to redirect to dashboard based on user roles in ReactJS

1 Answers1