Optimize code

src/AuthRoute.tsx

@@ -1,6 +1,6 @@
-import { getLoginStatus } from '@/utils/auth.ts'
+import { getLoginStatus } from '@/utils/auth'
-import { PRODUCTION_NAME } from '@/constants/Common.constants.ts'
+import { PRODUCTION_NAME } from '@/constants/common.constants'
-import { getRedirectUrl } from '@/utils/common.ts'
+import { getRedirectUrl } from '@/utils/common'
 
 const AuthRoute = () => {
     const matches = useMatches()

src/components/common/LoadingMask.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Icon from '@ant-design/icons'
 import '@/assets/css/components/common/loading-mask.scss'
 import FitFullScreen from '@/components/common/FitFullScreen'
-import { COLOR_FONT_MAIN } from '@/constants/Common.constants'
+import { COLOR_FONT_MAIN } from '@/constants/common.constants'
 
 const LoadingMask: React.FC = () => {
     const loadingIcon = (

src/constants/Common.constants.ts

@@ -1,67 +0,0 @@
-const PRODUCTION_NAME = 'FatWeb'
-const TOKEN_NAME = 'JWT_TOKEN'
-const COLOR_PRODUCTION = '#00D4FF'
-const COLOR_BACKGROUND = '#F5F5F5'
-const COLOR_TOP = 'rgba(234,46,13,0.85)'
-const COLOR_FONT_MAIN = '#4D4D4D'
-const COLOR_FONT_SECONDARY = '#9E9E9E'
-const SIZE_ICON_XS = '16px'
-const SIZE_ICON_SM = '20px'
-const SIZE_ICON_MD = '24px'
-const SIZE_ICON_LG = '32px'
-const SIZE_ICON_XL = '64px'
-
-/**
- * Response code
- */
-const SYSTEM_OK = 10000
-const SYSTEM_LOGIN_SUCCESS = 10020
-const SYSTEM_PASSWORD_CHANGE_SUCCESS = 10021
-const SYSTEM_LOGOUT_SUCCESS = 10022
-const SYSTEM_TOKEN_RENEW_SUCCESS = 10023
-const SYSTEM_UNAUTHORIZED = 10030
-const SYSTEM_USERNAME_NOT_FOUND = 10031
-const SYSTEM_ACCESS_DENIED = 10032
-const SYSTEM_USER_DISABLE = 10033
-const SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR = 10034
-const SYSTEM_OLD_PASSWORD_NOT_MATCH = 10035
-const SYSTEM_LOGOUT_FAILED = 10036
-const SYSTEM_TOKEN_ILLEGAL = 10037
-const SYSTEM_TOKEN_HAS_EXPIRED = 10038
-const SYSTEM_REQUEST_ILLEGAL = 10040
-const SYSTEM_ARGUMENT_NOT_VALID = 10041
-const SYSTEM_ERROR = 10050
-const SYSTEM_TIMEOUT = 10051
-
-export {
-    PRODUCTION_NAME,
-    TOKEN_NAME,
-    COLOR_PRODUCTION,
-    COLOR_BACKGROUND,
-    COLOR_FONT_MAIN,
-    COLOR_FONT_SECONDARY,
-    COLOR_TOP,
-    SIZE_ICON_XS,
-    SIZE_ICON_SM,
-    SIZE_ICON_MD,
-    SIZE_ICON_LG,
-    SIZE_ICON_XL,
-    SYSTEM_OK,
-    SYSTEM_LOGIN_SUCCESS,
-    SYSTEM_PASSWORD_CHANGE_SUCCESS,
-    SYSTEM_LOGOUT_SUCCESS,
-    SYSTEM_TOKEN_RENEW_SUCCESS,
-    SYSTEM_UNAUTHORIZED,
-    SYSTEM_USERNAME_NOT_FOUND,
-    SYSTEM_ACCESS_DENIED,
-    SYSTEM_USER_DISABLE,
-    SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
-    SYSTEM_OLD_PASSWORD_NOT_MATCH,
-    SYSTEM_LOGOUT_FAILED,
-    SYSTEM_TOKEN_ILLEGAL,
-    SYSTEM_TOKEN_HAS_EXPIRED,
-    SYSTEM_REQUEST_ILLEGAL,
-    SYSTEM_ARGUMENT_NOT_VALID,
-    SYSTEM_ERROR,
-    SYSTEM_TIMEOUT
-}

src/constants/common.constants.ts

@@ -0,0 +1,35 @@
+export const PRODUCTION_NAME = 'FatWeb'
+export const STORAGE_TOKEN_KEY = 'JWT_TOKEN'
+export const STORAGE_USER_INFO_KEY = 'USER_INFO'
+export const COLOR_PRODUCTION = '#00D4FF'
+export const COLOR_BACKGROUND = '#F5F5F5'
+export const COLOR_TOP = 'rgba(234,46,13,0.85)'
+export const COLOR_FONT_MAIN = '#4D4D4D'
+export const COLOR_FONT_SECONDARY = '#9E9E9E'
+export const SIZE_ICON_XS = '16px'
+export const SIZE_ICON_SM = '20px'
+export const SIZE_ICON_MD = '24px'
+export const SIZE_ICON_LG = '32px'
+export const SIZE_ICON_XL = '64px'
+
+/**
+ * Response code
+ */
+export const SYSTEM_OK = 10000
+export const SYSTEM_LOGIN_SUCCESS = 10020
+export const SYSTEM_PASSWORD_CHANGE_SUCCESS = 10021
+export const SYSTEM_LOGOUT_SUCCESS = 10022
+export const SYSTEM_TOKEN_RENEW_SUCCESS = 10023
+export const SYSTEM_UNAUTHORIZED = 10030
+export const SYSTEM_USERNAME_NOT_FOUND = 10031
+export const SYSTEM_ACCESS_DENIED = 10032
+export const SYSTEM_USER_DISABLE = 10033
+export const SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR = 10034
+export const SYSTEM_OLD_PASSWORD_NOT_MATCH = 10035
+export const SYSTEM_LOGOUT_FAILED = 10036
+export const SYSTEM_TOKEN_ILLEGAL = 10037
+export const SYSTEM_TOKEN_HAS_EXPIRED = 10038
+export const SYSTEM_REQUEST_ILLEGAL = 10040
+export const SYSTEM_ARGUMENT_NOT_VALID = 10041
+export const SYSTEM_ERROR = 10050
+export const SYSTEM_TIMEOUT = 10051

src/constants/urls.constants.ts

@@ -0,0 +1,3 @@
+export const URL_API_LOGIN = '/login'
+export const URL_API_TOKEN = '/token'
+export const URL_API_LOGOUT = '/logout'

src/pages/HomeFramework.tsx

@@ -4,7 +4,7 @@ import router from '@/router'
 import LoadingMask from '@/components/common/LoadingMask'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import Icon from '@ant-design/icons'
-import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
+import { COLOR_FONT_SECONDARY } from '@/constants/common.constants'
 import { NavLink } from 'react-router-dom'
 
 export const HomeFrameworkContext = createContext<{

src/pages/Login.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { login } from '@/utils/auth.ts'
+import { login } from '@/utils/auth'
 import {
     SYSTEM_LOGIN_SUCCESS,
     SYSTEM_LOGIN_USERNAME_PASSWORD_ERROR,
     SYSTEM_USER_DISABLE,
     SYSTEM_USERNAME_NOT_FOUND
-} from '@/constants/Common.constants.ts'
+} from '@/constants/common.constants'
-import { setToken } from '@/utils/common.ts'
+import { setToken } from '@/utils/common'
 import '@/assets/css/pages/login.scss'
 
 const Login: React.FC = () => {

src/pages/ToolsFramework.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
-import { toolsJsonObjects } from '@/router/tools.tsx'
+import { toolsJsonObjects } from '@/router/tools'
-import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx'
+import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
-import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common.ts'
+import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common'
-import { getLoginStatus, logout } from '@/utils/auth.ts'
+import { getLoginStatus, logout } from '@/utils/auth'
 import { NavLink, Outlet } from 'react-router-dom'
 
 const ToolsFramework: React.FC = () => {

src/services/index.tsx

@@ -7,7 +7,7 @@ import {
     SYSTEM_TOKEN_ILLEGAL,
     SYSTEM_TOKEN_RENEW_SUCCESS,
     SYSTEM_UNAUTHORIZED
-} from '@/constants/Common.constants'
+} from '@/constants/common.constants'
 import { message } from 'antd'
 
 const service: AxiosInstance = axios.create({

src/utils/auth.ts

@@ -1,30 +1,31 @@
 import { getCaptcha, getLocalStorage, removeToken, setLocalStorage } from './common'
-import { SYSTEM_OK, TOKEN_NAME } from '@/constants/Common.constants'
+import { SYSTEM_OK, STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
 import request from '@/services'
+import { URL_API_LOGIN, URL_API_LOGOUT } from '@/constants/urls.constants'
 
 let captcha: Captcha
 
 export const login = async (username: string, password: string) => {
-    return await request.post<Token>('/login', {
+    return await request.post<Token>(URL_API_LOGIN, {
         username,
         password
     })
 }
 
 export const logout = async () => {
-    return request.post('/logout').finally(() => {
+    return request.post(URL_API_LOGOUT).finally(() => {
         removeToken()
     })
 }
 
 export const getLoginStatus = () => {
-    return getLocalStorage(TOKEN_NAME) !== null
+    return getLocalStorage(STORAGE_TOKEN_KEY) !== null
 }
 
 export const getUser = async (): Promise<User> => {
-    if (getLocalStorage('userInfo') !== null) {
+    if (getLocalStorage(STORAGE_USER_INFO_KEY) !== null) {
         return new Promise((resolve) => {
-            resolve(JSON.parse(getLocalStorage('userInfo') as string) as User)
+            resolve(JSON.parse(getLocalStorage(STORAGE_USER_INFO_KEY) as string) as User)
         })
     }
     return requestUser()
@@ -37,7 +38,7 @@ export const requestUser = async () => {
         const response = value.data
         if (response.code === SYSTEM_OK) {
             user = response.data
-            setLocalStorage('userInfo', JSON.stringify(user))
+            setLocalStorage(STORAGE_USER_INFO_KEY, JSON.stringify(user))
         }
     })
 

src/utils/common.ts

@@ -1,4 +1,4 @@
-import { TOKEN_NAME } from '@/constants/Common.constants'
+import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
 
 export const getQueryVariable = (variable: string) => {
     const query = window.location.search.substring(1)
@@ -36,7 +36,7 @@ export const setLocalStorage = (name: string, value: string) => {
 }
 
 export const setToken = (token: string) => {
-    setLocalStorage(TOKEN_NAME, token)
+    setLocalStorage(STORAGE_TOKEN_KEY, token)
 }
 
 export const getCookie = (name: string) => {
@@ -57,7 +57,7 @@ export const getLocalStorage = (name: string) => {
 }
 
 export const getToken = () => {
-    return getLocalStorage(TOKEN_NAME)
+    return getLocalStorage(STORAGE_TOKEN_KEY)
 }
 
 export const removeCookie = (name: string) => {
@@ -69,8 +69,8 @@ export const removeLocalStorage = (name: string) => {
 }
 
 export const removeToken = () => {
-    removeLocalStorage('userInfo')
+    removeLocalStorage(STORAGE_USER_INFO_KEY)
-    removeLocalStorage(TOKEN_NAME)
+    removeLocalStorage(STORAGE_TOKEN_KEY)
 }
 
 export const clearLocalStorage = () => {