Compare commits
No commits in common. "upgrading" and "main" have entirely different histories.
12
package.json
12
package.json
|
@ -14,8 +14,8 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-router-dom": "^6.2.1",
|
"react-router-dom": "^5.2.0",
|
||||||
"web-vitals": "^2.1.2"
|
"web-vitals": "^1.0.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "craco start",
|
"start": "craco start",
|
||||||
|
@ -49,11 +49,11 @@
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
"@types/jest": "^26.0.15",
|
"@types/jest": "^26.0.15",
|
||||||
"@types/node": "^12.0.0",
|
"@types/node": "^12.0.0",
|
||||||
"@types/react": "^17.0.2",
|
"@types/react": "^17.0.0",
|
||||||
"@types/react-dom": "^17.0.2",
|
"@types/react-dom": "^17.0.0",
|
||||||
"@types/react-router-dom": "^5.3.2",
|
"@types/react-router-dom": "^5.1.7",
|
||||||
"craco-less": "^2.0.0",
|
"craco-less": "^2.0.0",
|
||||||
"prettier": "^2.5.1",
|
"prettier": "^2.3.1",
|
||||||
"react-scripts": "5.0.0",
|
"react-scripts": "5.0.0",
|
||||||
"typescript": "^4.5.4"
|
"typescript": "^4.5.4"
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
import AppProvider from '@/provider/AppProvider'
|
||||||
|
import RouterView from '../routes'
|
||||||
|
import './App.less'
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
return (
|
||||||
|
<AppProvider><RouterView /></AppProvider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
|
@ -1,18 +0,0 @@
|
||||||
import { BrowserRouter as Router } from 'react-router-dom'
|
|
||||||
import RouterView from '@/routes'
|
|
||||||
import { AuthProvider, LayoutProvider } from '@/context'
|
|
||||||
import './app.less'
|
|
||||||
|
|
||||||
const App = () => {
|
|
||||||
return (
|
|
||||||
<Router>
|
|
||||||
<AuthProvider>
|
|
||||||
<LayoutProvider>
|
|
||||||
<RouterView />
|
|
||||||
</LayoutProvider>
|
|
||||||
</AuthProvider>
|
|
||||||
</Router>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
|
@ -1,6 +0,0 @@
|
||||||
export const TOKEN_KEY = 'token'
|
|
||||||
|
|
||||||
export const ROUTE = {
|
|
||||||
ROOT: '/',
|
|
||||||
LOGIN: '/login',
|
|
||||||
}
|
|
|
@ -0,0 +1,131 @@
|
||||||
|
import { AppConfig } from '@/config'
|
||||||
|
import { printError, printInfo } from '@/utils/log_util'
|
||||||
|
import { getStorage, setStorage } from '@/utils/ls_util'
|
||||||
|
import React, { useContext, useCallback, useReducer, useEffect } from 'react'
|
||||||
|
|
||||||
|
interface AuthContextState {
|
||||||
|
login: (args: { username: string; password: string }) => Promise<void>
|
||||||
|
state: {
|
||||||
|
user: {
|
||||||
|
username: string
|
||||||
|
userId: string
|
||||||
|
} | null
|
||||||
|
}
|
||||||
|
getToken: () => string | undefined | null
|
||||||
|
logout: () => void
|
||||||
|
isLogin: () => boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
enum AuthActionType {
|
||||||
|
'LOGIN' = 'LOGIN',
|
||||||
|
'LOGOUT' = 'LOGOUT',
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthReducer: (
|
||||||
|
state: AuthContextState['state'],
|
||||||
|
action: {
|
||||||
|
type: AuthActionType
|
||||||
|
payload?: any
|
||||||
|
}
|
||||||
|
) => AuthContextState['state'] = (state, action) => {
|
||||||
|
switch (action.type) {
|
||||||
|
case AuthActionType.LOGIN:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
user: action.payload,
|
||||||
|
}
|
||||||
|
case AuthActionType.LOGOUT:
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
user: null,
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return state
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = React.createContext<AuthContextState>({
|
||||||
|
login: async () => {},
|
||||||
|
state: {
|
||||||
|
user: null,
|
||||||
|
},
|
||||||
|
getToken: () => {
|
||||||
|
return undefined
|
||||||
|
},
|
||||||
|
logout: () => {},
|
||||||
|
isLogin: () => { return false },
|
||||||
|
})
|
||||||
|
|
||||||
|
const AuthProvider: React.FC = (props) => {
|
||||||
|
const [state, dispatch] = useReducer(AuthReducer, {
|
||||||
|
user: null,
|
||||||
|
})
|
||||||
|
|
||||||
|
const login = async (args: { username: string; password: string }) => {
|
||||||
|
const res = {
|
||||||
|
data: {
|
||||||
|
token: 'DEMO_HAH',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
setStorage(AppConfig.CLIENT_TOKEN_KEY, res.data.token)
|
||||||
|
await verify()
|
||||||
|
dispatch({
|
||||||
|
type: AuthActionType.LOGIN,
|
||||||
|
payload: args,
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const doVerify = async () => {
|
||||||
|
const token = getStorage(AppConfig.CLIENT_TOKEN_KEY)
|
||||||
|
const userAuthInfo = {}
|
||||||
|
|
||||||
|
printInfo("User details =>", token, userAuthInfo)
|
||||||
|
}
|
||||||
|
|
||||||
|
doVerify()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const verify = async () => {
|
||||||
|
const token = getStorage(AppConfig.CLIENT_TOKEN_KEY)
|
||||||
|
printError('Verify not implemented with token: ', token)
|
||||||
|
const userAuthInfo = {}
|
||||||
|
return userAuthInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
const logout = useCallback(() => {
|
||||||
|
setStorage(AppConfig.CLIENT_TOKEN_KEY, undefined)
|
||||||
|
dispatch({
|
||||||
|
type: AuthActionType.LOGOUT,
|
||||||
|
})
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const getToken = () => getStorage(AppConfig.CLIENT_TOKEN_KEY)
|
||||||
|
|
||||||
|
const isLogin = (): boolean => {
|
||||||
|
return getToken() != null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider
|
||||||
|
value={{
|
||||||
|
login,
|
||||||
|
state,
|
||||||
|
logout,
|
||||||
|
isLogin,
|
||||||
|
getToken,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useAuthContext = () => {
|
||||||
|
return useContext(AuthContext)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthProvider
|
|
@ -1,149 +0,0 @@
|
||||||
import React, { useContext, useCallback, useReducer, useEffect } from 'react'
|
|
||||||
import { ROUTE, TOKEN_KEY } from '@/constants'
|
|
||||||
import { useNavigate, useLocation } from 'react-router-dom'
|
|
||||||
import { handleError } from '@/helpers'
|
|
||||||
|
|
||||||
interface AuthContextState {
|
|
||||||
login: (args: {
|
|
||||||
username: string
|
|
||||||
password: string
|
|
||||||
}) => Promise<UserAuth | null>
|
|
||||||
state: {
|
|
||||||
user: UserAuth | null
|
|
||||||
}
|
|
||||||
getToken: () => string | undefined | null
|
|
||||||
logout: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UserAuth {
|
|
||||||
username: string
|
|
||||||
id: string
|
|
||||||
email: string
|
|
||||||
phone: string
|
|
||||||
getToken: () => string | null
|
|
||||||
roles: string[]
|
|
||||||
profile: any
|
|
||||||
authorities: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
enum AuthActionType {
|
|
||||||
'LOGIN' = 'LOGIN',
|
|
||||||
'LOGOUT' = 'LOGOUT',
|
|
||||||
}
|
|
||||||
|
|
||||||
const AuthReducer: (
|
|
||||||
state: AuthContextState['state'],
|
|
||||||
action: {
|
|
||||||
type: AuthActionType
|
|
||||||
payload?: any
|
|
||||||
}
|
|
||||||
) => AuthContextState['state'] = (state, action) => {
|
|
||||||
switch (action.type) {
|
|
||||||
case AuthActionType.LOGIN:
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
user: action.payload,
|
|
||||||
}
|
|
||||||
case AuthActionType.LOGOUT:
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
user: null,
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
return state
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const AuthContext = React.createContext<AuthContextState>({
|
|
||||||
login: async () => null,
|
|
||||||
state: {
|
|
||||||
user: null,
|
|
||||||
},
|
|
||||||
getToken: () => {
|
|
||||||
return undefined
|
|
||||||
},
|
|
||||||
logout: () => {},
|
|
||||||
})
|
|
||||||
|
|
||||||
const AuthProvider: React.FC = (props) => {
|
|
||||||
const [state, dispatch] = useReducer(AuthReducer, {
|
|
||||||
user: null,
|
|
||||||
})
|
|
||||||
|
|
||||||
const login = async (args: { username: string; password: string }) => {
|
|
||||||
let userAuthInfo: UserAuth | null = null
|
|
||||||
try {
|
|
||||||
localStorage.setItem(TOKEN_KEY, '')
|
|
||||||
userAuthInfo = await verify()
|
|
||||||
dispatch({
|
|
||||||
type: AuthActionType.LOGIN,
|
|
||||||
payload: userAuthInfo,
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
handleError(e)
|
|
||||||
}
|
|
||||||
return userAuthInfo
|
|
||||||
}
|
|
||||||
|
|
||||||
const navigate = useNavigate()
|
|
||||||
const location = useLocation()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const doVerify = async () => {
|
|
||||||
const userAuthInfo = await verify()
|
|
||||||
if (userAuthInfo === null && location.pathname !== '/login') {
|
|
||||||
await navigate(ROUTE.LOGIN)
|
|
||||||
} else if (
|
|
||||||
userAuthInfo !== null &&
|
|
||||||
location.pathname === '/login'
|
|
||||||
) {
|
|
||||||
await navigate(ROUTE.ROOT)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
doVerify()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const verify = async () => {
|
|
||||||
const token = localStorage.getItem(TOKEN_KEY) as string
|
|
||||||
let userAuthInfo: UserAuth | null = null
|
|
||||||
try {
|
|
||||||
dispatch({
|
|
||||||
type: AuthActionType.LOGIN,
|
|
||||||
payload: userAuthInfo,
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
}
|
|
||||||
return userAuthInfo
|
|
||||||
}
|
|
||||||
|
|
||||||
const logout = useCallback(async () => {
|
|
||||||
localStorage.setItem(TOKEN_KEY, '')
|
|
||||||
dispatch({
|
|
||||||
type: AuthActionType.LOGOUT,
|
|
||||||
})
|
|
||||||
navigate(ROUTE.LOGIN)
|
|
||||||
}, [state])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AuthContext.Provider
|
|
||||||
value={{
|
|
||||||
login,
|
|
||||||
state,
|
|
||||||
logout,
|
|
||||||
getToken: () => {
|
|
||||||
return localStorage.getItem(TOKEN_KEY)
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</AuthContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useAuthContext = () => {
|
|
||||||
return useContext(AuthContext)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AuthProvider
|
|
|
@ -1,4 +0,0 @@
|
||||||
import AuthProvider, { useAuthContext } from './auth.context'
|
|
||||||
import LayoutProvider, { useLayout } from './layout.context'
|
|
||||||
|
|
||||||
export { AuthProvider, LayoutProvider, useLayout, useAuthContext }
|
|
|
@ -1,38 +0,0 @@
|
||||||
import React, { createContext, useContext, useState, useEffect } from 'react'
|
|
||||||
import { useLocation } from 'react-router-dom'
|
|
||||||
|
|
||||||
interface LayoutContextState {
|
|
||||||
selectedSideMenuKeys: string[]
|
|
||||||
setSelectedSideMenuKeys: React.Dispatch<React.SetStateAction<string[]>>
|
|
||||||
}
|
|
||||||
|
|
||||||
const LayoutContext = createContext<LayoutContextState>({
|
|
||||||
selectedSideMenuKeys: [],
|
|
||||||
setSelectedSideMenuKeys: () => {},
|
|
||||||
})
|
|
||||||
|
|
||||||
const LayoutProvider: React.FC = (props) => {
|
|
||||||
const [selectedSideMenuKeys, setSelectedSideMenuKeys] = useState<
|
|
||||||
LayoutContextState['selectedSideMenuKeys']
|
|
||||||
>([])
|
|
||||||
|
|
||||||
const location = useLocation()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (location.pathname === '/') {
|
|
||||||
setSelectedSideMenuKeys([])
|
|
||||||
}
|
|
||||||
}, [location.pathname])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LayoutContext.Provider
|
|
||||||
value={{ selectedSideMenuKeys, setSelectedSideMenuKeys }}
|
|
||||||
>
|
|
||||||
{props.children}
|
|
||||||
</LayoutContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useLayout = () => useContext(LayoutContext)
|
|
||||||
|
|
||||||
export default LayoutProvider
|
|
|
@ -1,6 +0,0 @@
|
||||||
const handleError = (e: any) => {
|
|
||||||
console.error(e)
|
|
||||||
return <p>See console</p>
|
|
||||||
}
|
|
||||||
|
|
||||||
export default handleError
|
|
|
@ -1,3 +0,0 @@
|
||||||
import handleError from './error.helper'
|
|
||||||
|
|
||||||
export { handleError }
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom'
|
||||||
import './index.less'
|
import './index.less'
|
||||||
import App from '@/app'
|
import App from '@/app/App'
|
||||||
import reportWebVitals from './reportWebVitals'
|
import reportWebVitals from './reportWebVitals'
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
|
|
|
@ -1,15 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
const BaseLayout: React.FC<{
|
|
||||||
renderSideMenu: () => React.ReactNode
|
|
||||||
}> = (props) => {
|
|
||||||
const { renderSideMenu } = props
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{renderSideMenu()}
|
|
||||||
<div>{props.children}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BaseLayout
|
|
|
@ -1,3 +0,0 @@
|
||||||
import BaseLayout from './base.layout'
|
|
||||||
|
|
||||||
export { BaseLayout }
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { RouteTypes } from '@/routes/types'
|
import { RouteTypes } from '@/routes/types'
|
||||||
import { clearStorage } from '@/utils/ls_util'
|
import { clearStorage } from '@/utils/ls_util'
|
||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
import { Navigate } from 'react-router'
|
import { Redirect } from 'react-router'
|
||||||
|
|
||||||
const Reset = () => {
|
const Reset = () => {
|
||||||
const clearAllCaches = () => {
|
const clearAllCaches = () => {
|
||||||
|
@ -17,7 +17,7 @@ const Reset = () => {
|
||||||
clearAllCaches()
|
clearAllCaches()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return <Navigate to={RouteTypes.HOME} />
|
return <Redirect to={RouteTypes.HOME} />
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Reset
|
export default Reset
|
|
@ -1,7 +0,0 @@
|
||||||
import AccessDenied from "./403";
|
|
||||||
import NotFound from "./404";
|
|
||||||
|
|
||||||
export {
|
|
||||||
AccessDenied,
|
|
||||||
NotFound,
|
|
||||||
}
|
|
|
@ -1,8 +0,0 @@
|
||||||
import About from './about'
|
|
||||||
import Home from './home'
|
|
||||||
import Info from './info'
|
|
||||||
import Login from './login'
|
|
||||||
import Profile from './profile'
|
|
||||||
import Reset from './reset'
|
|
||||||
|
|
||||||
export { Login, About, Home, Info, Profile, Reset }
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
const AppProvider = (props: any) => {
|
||||||
|
return <>{props.children}</>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppProvider
|
|
@ -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
|
|
@ -1,19 +0,0 @@
|
||||||
import { TOKEN_KEY } from '@/constants'
|
|
||||||
import React from 'react'
|
|
||||||
import { Route, useNavigate } from 'react-router-dom'
|
|
||||||
|
|
||||||
const AuthRoute: React.FC<{
|
|
||||||
component: () => React.ReactNode
|
|
||||||
}> = (props) => {
|
|
||||||
const { component, ...rest } = props
|
|
||||||
const navigate = useNavigate()
|
|
||||||
const token = localStorage.getItem(TOKEN_KEY) as string
|
|
||||||
|
|
||||||
if (!token) {
|
|
||||||
navigate('/login')
|
|
||||||
}
|
|
||||||
|
|
||||||
return <Route {...rest} element={component} />
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AuthRoute
|
|
|
@ -1,186 +1,35 @@
|
||||||
import { useCallback } from 'react'
|
import AuthProvider from '@/context/AuthContext'
|
||||||
import routes, { Authority, sideMenuRouteObjs, SideSubMenuObj } from './routes'
|
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
|
||||||
import { Routes, Route, Link, useLocation } from 'react-router-dom'
|
import AuthRoute from './AuthRoute'
|
||||||
import AuthRoute from './auth.route'
|
import { routes } from './routes'
|
||||||
import { BaseLayout } from '@/layouts'
|
|
||||||
import { useLayout, useAuthContext } from '@/context'
|
|
||||||
import { Login } from '@/pages'
|
|
||||||
import { AccessDenied } from '@/pages/error'
|
|
||||||
|
|
||||||
const renderRoute = (item: any) => {
|
|
||||||
const routeProps = {
|
|
||||||
key: item.key,
|
|
||||||
path: item.path,
|
|
||||||
exact: item.exact || true,
|
|
||||||
component:
|
|
||||||
item?.disabled === true ? () => <AccessDenied /> : item.component,
|
|
||||||
headerLabel: item.headerLabel,
|
|
||||||
}
|
|
||||||
|
|
||||||
return <AuthRoute {...routeProps} />
|
|
||||||
}
|
|
||||||
|
|
||||||
const newSideMenuRouteObjs: any[] = sideMenuRouteObjs.reduce(
|
|
||||||
(acc, curr: any) => {
|
|
||||||
let routes: any[] = []
|
|
||||||
if (curr.subMenus) {
|
|
||||||
routes.push(...curr.subMenus)
|
|
||||||
} else {
|
|
||||||
routes.push(curr)
|
|
||||||
}
|
|
||||||
|
|
||||||
return [...acc, ...routes] as any
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
)
|
|
||||||
|
|
||||||
const subMenusObjs: any[] = sideMenuRouteObjs.filter(
|
|
||||||
(item: any) => item.subMenus !== undefined
|
|
||||||
)
|
|
||||||
|
|
||||||
const RouterView = () => {
|
const RouterView = () => {
|
||||||
const { state } = useAuthContext()
|
return (
|
||||||
const { selectedSideMenuKeys, setSelectedSideMenuKeys } = useLayout()
|
<Router>
|
||||||
|
<Switch>
|
||||||
const authorities = (state && state.user && state.user.authorities) || []
|
{routes.map((route) => {
|
||||||
const location = useLocation()
|
const { withAuthority } = route
|
||||||
|
if (withAuthority) {
|
||||||
const AuthChecker = (item: any): any | null => {
|
return (
|
||||||
const authority = item?.authority as Authority
|
<AuthProvider key={route.key}>
|
||||||
if (!authority || !authority.privileges) return item
|
<AuthRoute {...route} />
|
||||||
const privileges = authority.privileges
|
</AuthProvider>
|
||||||
|
)
|
||||||
if (typeof privileges === 'string') {
|
|
||||||
// have permission
|
|
||||||
if (authorities.some((e) => e === privileges)) return item
|
|
||||||
} else if (Array.isArray(privileges)) {
|
|
||||||
// have permission
|
|
||||||
if (authority.strict === true) {
|
|
||||||
if (privileges.every((e) => authorities.some((a) => e === a)))
|
|
||||||
return item
|
|
||||||
} else {
|
} else {
|
||||||
if (privileges.some((e) => authorities.some((a) => e === a)))
|
|
||||||
return item
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (authority.hideNoPrivilege === false) {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
disabled: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// not have permission
|
|
||||||
// ignore and return null for no permission
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const AuthFilterItems = (items: any[]) => {
|
|
||||||
const filters = items.map((item) => AuthChecker(item))
|
|
||||||
return filters.filter((s) => s !== null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderMenuItem = useCallback((item: any) => {
|
|
||||||
const { key, path, label, disabled } = item
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
|
||||||
//disabled={disabled || false}
|
|
||||||
onClick={() => {
|
|
||||||
setSelectedSideMenuKeys([key])
|
|
||||||
}}
|
|
||||||
key={key}
|
|
||||||
// icon={item.icon}
|
|
||||||
>
|
|
||||||
<Link to={path}>{label}</Link>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const renderSideMenuLinks = useCallback(() => {
|
|
||||||
const defaultSelectedKey = newSideMenuRouteObjs.find((item) => {
|
|
||||||
return '/' + item.key === location.pathname
|
|
||||||
})
|
|
||||||
|
|
||||||
const defaultOpenKeys: string[] = []
|
|
||||||
|
|
||||||
const openSubMenusObj = subMenusObjs.find((item: SideSubMenuObj) => {
|
|
||||||
return item.subMenus.some((s) => '/' + s.key === location.pathname)
|
|
||||||
})
|
|
||||||
|
|
||||||
if (openSubMenusObj) {
|
|
||||||
defaultOpenKeys.push(openSubMenusObj.key)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: 'calc(100vh - 64px)',
|
|
||||||
overflow: 'hidden auto',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
// theme="light"
|
|
||||||
// mode="inline"
|
|
||||||
// defaultSelectedKeys={
|
|
||||||
// defaultSelectedKey ? [defaultSelectedKey.key] : []
|
|
||||||
// }
|
|
||||||
// defaultOpenKeys={defaultOpenKeys}
|
|
||||||
>
|
|
||||||
{AuthFilterItems(sideMenuRouteObjs).map((item) => {
|
|
||||||
const { subMenus } = item as any
|
|
||||||
|
|
||||||
return subMenus ? (
|
|
||||||
<div
|
|
||||||
key={item.key}
|
|
||||||
// icon={item.icon}
|
|
||||||
title={item.label}
|
|
||||||
>
|
|
||||||
{AuthFilterItems(subMenus).map((s: any) =>
|
|
||||||
renderMenuItem(s)
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
renderMenuItem(item)
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
if (location.pathname === '/login') {
|
|
||||||
return <Login />
|
|
||||||
}
|
|
||||||
|
|
||||||
const AuthRenderRoutes = () => {
|
|
||||||
const allRoutes = [...routes, ...newSideMenuRouteObjs]
|
|
||||||
|
|
||||||
return AuthFilterItems(allRoutes)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseLayout
|
|
||||||
renderSideMenu={() => {
|
|
||||||
return renderSideMenuLinks()
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Routes>
|
|
||||||
<Route
|
<Route
|
||||||
path={'/'}
|
key={route.key}
|
||||||
element={() => {
|
exact={route.exact}
|
||||||
return (
|
component={route.component}
|
||||||
<>
|
children={route.children}
|
||||||
{AuthRenderRoutes().map((item) =>
|
location={route.location}
|
||||||
renderRoute(item)
|
path={route.path}
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</Routes>
|
)
|
||||||
</BaseLayout>
|
}
|
||||||
|
})}
|
||||||
|
</Switch>
|
||||||
|
</Router>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,12 +10,10 @@ export interface AuthorityProps {
|
||||||
withAuthority?: boolean | undefined
|
withAuthority?: boolean | undefined
|
||||||
authorities?: Authority | string[] | string | undefined
|
authorities?: Authority | string[] | string | undefined
|
||||||
strictAuthority?: boolean | undefined
|
strictAuthority?: boolean | undefined
|
||||||
hideNoPrivilege?: boolean | undefined
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CustomRouteProps extends RouteProps, AuthorityProps {
|
export interface CustomRouteProps extends RouteProps, AuthorityProps {
|
||||||
key: string
|
key: string
|
||||||
location?: string | undefined
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MenuProps {
|
export interface MenuProps {
|
||||||
|
|
|
@ -1,65 +1,57 @@
|
||||||
import React from 'react'
|
import About from '@/pages/About'
|
||||||
import { Reset, Home, Profile, Info } from '@/pages'
|
import NotFound from '@/pages/Error/404'
|
||||||
|
import Home from '@/pages/Home'
|
||||||
|
import Info from '@/pages/Info'
|
||||||
|
import Login from '@/pages/Login'
|
||||||
|
import Profile from '@/pages/Profile'
|
||||||
|
import Reset from '@/pages/Reset'
|
||||||
|
import { CustomRouteProps } from '@/routes/interfaces'
|
||||||
|
import { RouteTypes } from '@/routes/types'
|
||||||
|
|
||||||
export interface Authority {
|
const routes: CustomRouteProps[] = [
|
||||||
privileges?: string | Array<string>
|
// Auth
|
||||||
// if true => AND | is false => OR (related to privileges)
|
{
|
||||||
// compare privileges of reponse and privileges above
|
key: 'login',
|
||||||
strict?: boolean
|
path: RouteTypes.LOGIN,
|
||||||
// if true, hide or not render. Else show but disabled (element/children)
|
component: () => <Login />,
|
||||||
hideNoPrivilege?: boolean
|
},
|
||||||
}
|
|
||||||
|
|
||||||
export interface RouteObj {
|
|
||||||
path: string
|
|
||||||
component: () => React.ReactNode
|
|
||||||
exact?: boolean
|
|
||||||
key: string
|
|
||||||
headerLabel?: string
|
|
||||||
authority?: Authority
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SideMenuRouteObj extends RouteObj {
|
|
||||||
icon?: any
|
|
||||||
label: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SideSubMenuObj {
|
|
||||||
icon: any
|
|
||||||
label: string
|
|
||||||
key: string
|
|
||||||
subMenus: SideMenuRouteObj[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const sideMenuRouteObjs: (SideMenuRouteObj | SideSubMenuObj)[] = [
|
|
||||||
{
|
{
|
||||||
component: () => <Home />,
|
|
||||||
path: '/',
|
|
||||||
key: 'home',
|
key: 'home',
|
||||||
headerLabel: '',
|
exact: true,
|
||||||
label: 'Home',
|
path: RouteTypes.HOME,
|
||||||
// authority: {
|
component: () => <Home />,
|
||||||
// privileges: ['ADMIN', 'USER'],
|
|
||||||
// hideNoPrivilege: false,
|
|
||||||
// strict: true,
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
component: () => <Profile />,
|
key: 'about',
|
||||||
path: '/profile',
|
path: RouteTypes.ABOUT,
|
||||||
key: 'profile',
|
component: () => <About />,
|
||||||
headerLabel: '',
|
|
||||||
label: 'Profile',
|
|
||||||
},
|
},
|
||||||
]
|
|
||||||
|
|
||||||
const routes: RouteObj[] = [
|
|
||||||
{
|
{
|
||||||
path: '/reset',
|
exact: true,
|
||||||
component: () => <Reset />,
|
key: 'info',
|
||||||
|
path: RouteTypes.INFO,
|
||||||
|
component: () => <Info />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
exact: true,
|
||||||
key: 'reset',
|
key: 'reset',
|
||||||
headerLabel: 'Reset',
|
path: RouteTypes.RESET,
|
||||||
|
component: () => <Reset />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
exact: true,
|
||||||
|
key: 'profile',
|
||||||
|
path: RouteTypes.PROFILE,
|
||||||
|
component: () => <Profile />,
|
||||||
|
withAuthority: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Errors
|
||||||
|
{
|
||||||
|
key: 'notfound',
|
||||||
|
path: RouteTypes.ERROR_404,
|
||||||
|
component: () => <NotFound />,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
export { sideMenuRouteObjs, routes as default }
|
export { routes }
|
||||||
|
|
|
@ -1,15 +1,17 @@
|
||||||
const RouteTypes = {
|
const RouteTypes = {
|
||||||
HOME: '/',
|
HOME: "/",
|
||||||
ABOUT: '/about',
|
ABOUT: "/about",
|
||||||
PROFILE: '/profile',
|
PROFILE: "/profile",
|
||||||
INFO: '/info',
|
INFO: "/info",
|
||||||
RESET: '/reset',
|
RESET: "/reset",
|
||||||
|
|
||||||
// Auth
|
// Auth
|
||||||
LOGIN: '/login',
|
LOGIN: '/login',
|
||||||
|
|
||||||
// Errors
|
// Errors
|
||||||
ERROR_404: '*',
|
ERROR_404: "**",
|
||||||
}
|
}
|
||||||
|
|
||||||
export { RouteTypes }
|
export {
|
||||||
|
RouteTypes,
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user