Build a component <PrivateRoute> that determines whether a user is authenticated and authorized to view a given page.
If the user is authorized to view a given page return a regular <Route> component showing the given page. If not, redirect the user to the login component.
[project-name] (display list of screenshots for a given project) (private)
screenshots (part of the hierarchy, but we are not implementing this as a page)
[screenshot-id] (display the screenshot with annotations) (public, but being authorized allows editing content)
user (user profile) (private)
(You don't need to make the above components functional in this task, but it would be nice if you create placeholder components, so if you access for example /user you see a text saying "user page" - just to verify that routing is working correctly)
Stretch goal:
Pass the original requested route to the login page component and make sure to redirect the user to the right route after succesful login.
Description
Build a component
<PrivateRoute>that determines whether a user is authenticated and authorized to view a given page.If the user is authorized to view a given page return a regular
<Route>component showing the given page. If not, redirect the user to the login component.You can check the previous final project for inspiration: https://github.com/HackYourFuture-CPH/ov-class09-fp/blob/develop/src/client/components/PrivateRoute.js
Route Strucuture
(You don't need to make the above components functional in this task, but it would be nice if you create placeholder components, so if you access for example /user you see a text saying "user page" - just to verify that routing is working correctly)
Stretch goal:
Pass the original requested route to the login page component and make sure to redirect the user to the right route after succesful login.