I am using reactjs and express js to build my application
see the folder structure below
I have my app.js like this
const express = require("express");
const path = require("path");
const { db } = require("../database/db.js");
const session = require("express-session");
const store = new session.MemoryStore();
dotenv.config();
const app = express();
const PORT = process.env.PORT || 3001;
app.use(express.json());
// session
app.use(
session({
secret: process.env.SECRET,
resave: false,
saveUninitialized: false,
store,
cookie: {
maxAge: 20000,
secure: false,
},
})
);
app.use("/api/admin", adminRoutes);
app.use("/api/employee", employeeRoutes);
app.get("/api", (req, res) => {
res.send("Api is running");
});
app.listen(PORT, console.log("server is running"));
And I have my react routes like this,
function App() {
return (
<div className="App">
<Routes>
<Route
path="/admin"
element={
<>
<AdminHeader></AdminHeader>
<AdminHome></AdminHome>
</>
}
></Route>
<Route
path="/employee"
element={
<>
<EmployeeHeader></EmployeeHeader>
<EmployeeHome></EmployeeHome>
</>
}
></Route>
<Route
path="/"
element={
<>
<Header></Header>
<Home></Home>
</>
}
></Route>
</Routes>
</div>
);
}
Below code is just an example code to give context of this question. This is another node js app.
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));
app.set("views", ["./views", "./screens"]);
app.use(
session({
secret: "f4z4gs$Gcg",
cookie: { maxAge: 10000, secure: false },
saveUninitialized: false,
resave: false,
store,
})
);
function ensureAuthentication(req, res, next) {
// Complete the if statmenet below:
if (req.session.authenticated) {
return next();
} else {
// res.status(403).json({ msg: "You're not authorized to view this page" });
res.redirect("/login");
}
}
// Add your ensureAuthentication middleware below:
app.get("/shop", ensureAuthentication, (req, res) => {
// Send the user object to the view page:
console.log("INSIDE ensureAuthentication....");
console.log(req.session);
res.render("shop", { user: req.session.user });
});
app.get("/login", (req, res) => {
res.render("login");
});
app.get("/register", (req, res) => {
res.render("screen");
});
// POST request for logging in
app.post("/login", (req, res) => {
const { username, password } = req.body;
db.users.findByUsername(username, (err, user) => {
if (!user) return res.status(403).json({ msg: "No user found!" });
if (user.password === password) {
req.session.authenticated = true;
req.session.user = {
username,
password,
};
res.redirect("/shop");
} else {
res.status(403).json({ msg: "Bad Credentials" });
}
});
});
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
look here the folder structure of this example node js app
with this kind of folder structure, here we can do res.render and render a view (login, shop, register).
So my question is, is there any way I could do the same using my original folder structure. Or more specifically, is thery any way I could do res.render(oneOfTheReactJsRouteHere).
Just in case you may be wondering why I want to do this? Here is why.
Right now everything is working properly and I am happy with that. Till now, I am using useEffect in reactjs to fetch data from backend and do the thing accordingly.
But there is one particular case, I want to login as admin and set the session accordingly and again I can check if the admin is logged in using useEffect in frontend to fetch data from backend and do the things. But this will be tedious to in every reactjs page, as I have to check if admin is logged in many different pages.
So, i was thinking if there is a better way. And I thought what if I could res.render(reactJSAdminLoginRoute) if the admin is not logged in right in the middleware of the backend. That would be convenient and I would not have to check about the admin login in the frontend.
That’s why I am asking this question.
I asked this question in many way and all downvoted and i had to delete. So here I am with this question. Thanks.
And I also want to know if am thinking correctly or if there is some better way to do this kind of checking.
Can check my github code here: https://github.com/amanc1248/aestheticproject
