Task: Add auth context and provider and add routes and route wrapper and more configs and utils

src/routes/AuthRoute.tsx

@@ -0,0 +1,21 @@
+import { useAuthContext } from '@/context/AuthContext'
+import AccessDenied from '@/pages/Error/403'
+import { Route } from 'react-router-dom'
+
+const AuthRoute = (props: any) => {
+    const { component, ...rest } = props
+    const { isLogin } = useAuthContext()
+
+    if (!isLogin()) {
+      return (<AccessDenied />)
+    }
+
+    return (
+        <Route
+            {...rest}
+            render={component}
+        />
+    )
+}
+
+export default AuthRoute

src/routes/index.tsx

@@ -1,4 +1,6 @@
+import AuthProvider from '@/context/AuthContext'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
+import AuthRoute from './AuthRoute'
 import { routes } from './routes'
 
 const RouterView = () => {
@@ -6,16 +8,25 @@ const RouterView = () => {
         <Router>
             <Switch>
                 {routes.map((route) => {
-                    return (
-                        <Route
-                            key={route.key}
-                            exact={route.exact}
-                            component={route.component}
-                            children={route.children}
-                            location={route.location}
-                            path={route.path}
-                        />
-                    )
+                    const { withAuthority } = route
+                    if (withAuthority) {
+                        return (
+                            <AuthProvider key={route.key}>
+                                <AuthRoute {...route} />
+                            </AuthProvider>
+                        )
+                    } else {
+                        return (
+                            <Route
+                                key={route.key}
+                                exact={route.exact}
+                                component={route.component}
+                                children={route.children}
+                                location={route.location}
+                                path={route.path}
+                            />
+                        )
+                    }
                 })}
             </Switch>
         </Router>

src/routes/interfaces.ts

@@ -0,0 +1,27 @@
+import { RouteProps } from 'react-router-dom'
+
+export interface Authority {
+    authority?: string | undefined
+    strict?: boolean | undefined
+    with?: Authority | undefined
+}
+
+export interface AuthorityProps {
+    withAuthority?: boolean | undefined
+    authorities?: Authority | string[] | string | undefined
+    strictAuthority?: boolean | undefined
+}
+
+export interface CustomRouteProps extends RouteProps, AuthorityProps {
+    key: string
+}
+
+export interface MenuProps {
+    icon: any
+    label?: string | undefined
+}
+
+export interface SideSubMenuProps extends MenuProps {
+    key?: string | undefined
+    subMenus: SideSubMenuProps[]
+}

src/routes/routes.tsx

@@ -1,36 +1,18 @@
-import { RouteProps } from 'react-router-dom'
-import About from '../pages/About'
-import Home from '../pages/Home'
-import RouteTypes from './types'
-
-interface Authority {
-    authority?: string | undefined
-    strict?: boolean | undefined
-    with?: Authority | undefined
-}
-
-interface AuthorityProps {
-    authorities?: Authority | string[] | string | undefined
-    strictAuthority?: boolean | undefined
-}
-
-interface CustomRouteProps extends RouteProps, AuthorityProps {
-    key: string
-}
-
-export interface MenuProps {
-    icon: any
-    label?: string | undefined
-}
-
-export interface SideMenuRouteProps extends CustomRouteProps, MenuProps {}
-
-export interface SideSubMenuProps extends MenuProps {
-    key?: string | undefined
-    subMenus: SideSubMenuProps[]
-}
+import About from '@/pages/About'
+import NotFound from '@/pages/Error/404'
+import Home from '@/pages/Home'
+import Login from '@/pages/Login'
+import Profile from '@/pages/Profile'
+import { CustomRouteProps } from '@/routes/interfaces'
+import { RouteTypes } from '@/routes/types'
 
 const routes: CustomRouteProps[] = [
+    // Auth
+    {
+        key: 'login',
+        path: RouteTypes.LOGIN,
+        component: () => <Login />,
+    },
     {
         key: 'home',
         exact: true,
@@ -42,8 +24,20 @@ const routes: CustomRouteProps[] = [
         path: RouteTypes.ABOUT,
         component: () => <About />,
     },
+    {
+        exact: true,
+        key: 'profile',
+        path: RouteTypes.PROFILE,
+        component: () => <Profile />,
+        withAuthority: true,
+    },
+
+    // Errors
+    {
+        key: 'notfound',
+        path: RouteTypes.ERROR_404,
+        component: () => <NotFound />,
+    },
 ]
 
-const menus: (SideMenuRouteProps | SideSubMenuProps)[] = []
-
-export { routes, menus }
+export { routes }

src/routes/types.ts

@@ -1,6 +1,15 @@
 const RouteTypes = {
     HOME: "/",
     ABOUT: "/about",
+    PROFILE: "/profile",
+
+    // Auth
+    LOGIN: '/login',
+
+    // Errors
+    ERROR_404: "**",
 }
 
-export default RouteTypes
+export {
+    RouteTypes,
+}