navigate测试

src/App.tsx

@@ -6,16 +6,17 @@ import { ThemeProvider } from './theme/theme-provider'
 import { MotionLazy } from './components/animate/motion-lazy'
 import Toast from './components/toast'
 
+const { VITE_APP_TITLE: APPTITLE } = import.meta.env
+
 function App() {
   return (
     <ThemeProvider adapters={[AntdAdapter]}>
       <MotionLazy>
         <Helmet>
-          <title>Slash Admin</title>
+          <title>{APPTITLE}</title>
           <link rel='icon' href={Logo} />
         </Helmet>
         <Toast />
-
         <Router />
       </MotionLazy>
     </ThemeProvider>

src/api/request/index.ts

@@ -1,4 +1,5 @@
 import { useUserSessionStore } from '@/store/userStore'
+import { useNavigation } from '@/router/context/NavigationContext'
 import { ResultEnum } from '#/enum'
 import { t } from '@/locales/i18n'
 import axios, { type AxiosError, type AxiosRequestConfig, type AxiosResponse } from 'axios'
@@ -8,6 +9,8 @@ import { serialize } from '@/utils/util'
 import { BASE_URL, TIME_OUT } from './config'
 
 const handleNetworkError = (response: AxiosResponse) => {
+  const { actions } = useUserSessionStore.getState()
+  const { navigate } = useNavigation()
   if (!response) return
   let errMessage = '未知错误'
   const status = response?.status
@@ -20,6 +23,8 @@ const handleNetworkError = (response: AxiosResponse) => {
         errMessage = '未授权，请重新登录'
         // abortRequestFn()
         // logoutFn()
+        navigate('/login')
+        actions.clearUserInfoAndToken()
         break
       case 403:
         errMessage = '拒绝访问'

src/pages/sys/login/providers/LoginStateProvider.tsx

@@ -1,51 +1,42 @@
-import {
-	type PropsWithChildren,
-	createContext,
-	useContext,
-	useMemo,
-	useState
-} from 'react';
+import { createContext, type PropsWithChildren, useContext, useMemo, useState } from 'react'
 
+// 控制loginForm显示的登录类型
 export enum LoginStateEnum {
-	LOGIN = 0,
-	REGISTER = 1,
-	RESET_PASSWORD = 2,
-	MOBILE = 3,
-	QR_CODE = 4,
+  LOGIN = 0,
+  REGISTER = 1,
+  RESET_PASSWORD = 2,
+  MOBILE = 3,
+  QR_CODE = 4
 }
 
 interface LoginStateContextType {
-	loginState: LoginStateEnum;
-	setLoginState: (loginState: LoginStateEnum) => void;
-	backToLogin: () => void;
+  loginState: LoginStateEnum
+  setLoginState: (loginState: LoginStateEnum) => void
+  backToLogin: () => void
 }
 const LoginStateContext = createContext<LoginStateContextType>({
-	loginState: LoginStateEnum.LOGIN,
-	setLoginState: () => {},
-	backToLogin: () => {}
-});
+  loginState: LoginStateEnum.LOGIN,
+  setLoginState: () => {},
+  backToLogin: () => {}
+})
 
 export function useLoginStateContext() {
-	const context = useContext(LoginStateContext);
-	return context;
+  const context = useContext(LoginStateContext)
+  return context
 }
 
 export function LoginStateProvider({ children }: PropsWithChildren) {
-	const [loginState, setLoginState] = useState(LoginStateEnum.LOGIN);
+  const [loginState, setLoginState] = useState(LoginStateEnum.LOGIN)
 
-	function backToLogin() {
-		setLoginState(LoginStateEnum.LOGIN);
-	}
+  function backToLogin() {
+    setLoginState(LoginStateEnum.LOGIN)
+  }
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-	const value: LoginStateContextType = useMemo(
-		() => ({ loginState, setLoginState, backToLogin }),
-		[loginState]
-	);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  const value: LoginStateContextType = useMemo(
+    () => ({ loginState, setLoginState, backToLogin }),
+    [loginState]
+  )
 
-	return (
-		<LoginStateContext.Provider value={value}>
-			{children}
-		</LoginStateContext.Provider>
-	);
+  return <LoginStateContext.Provider value={value}>{children}</LoginStateContext.Provider>
 }

src/router/context/NavigationContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, type PropsWithChildren, useContext } from 'react'
+import { useNavigate } from 'react-router'
+
+interface NavigationContextType {
+  navigate: ReturnType<typeof useNavigate>
+}
+
+const NavigationContext = createContext<NavigationContextType>({
+  navigate: () => {}
+})
+
+export const NavigationProvider = ({ children }: PropsWithChildren) => {
+  const navigate = useNavigate()
+  return <NavigationContext.Provider value={{ navigate }}>{children}</NavigationContext.Provider>
+}
+
+export const useNavigation = () => useContext(NavigationContext)

src/router/hooks/use-router.ts

@@ -1,19 +1,19 @@
-import { useMemo } from 'react';
-import { useNavigate } from 'react-router';
+import { useMemo } from 'react'
+import { useNavigate } from 'react-router'
 
 export function useRouter() {
-	const navigate = useNavigate();
+  const navigate = useNavigate()
 
-	const router = useMemo(
-		() => ({
-			back: () => navigate(-1),
-			forward: () => navigate(1),
-			reload: () => window.location.reload(),
-			push: (href: string) => navigate(href),
-			replace: (href: string) => navigate(href, { replace: true })
-		}),
-		[navigate]
-	);
+  const router = useMemo(
+    () => ({
+      back: () => navigate(-1),
+      forward: () => navigate(1),
+      reload: () => window.location.reload(),
+      push: (href: string) => navigate(href),
+      replace: (href: string) => navigate(href, { replace: true })
+    }),
+    [navigate]
+  )
 
-	return router;
+  return router
 }

tailwind.config.ts

@@ -1,35 +1,35 @@
-import type { Config } from "tailwindcss";
-import { breakpointsTokens } from "./src/theme/tokens/breakpoints";
-import { rgbAlpha, toCssVar, toCssVars } from "./src/utils/theme";
+import type { Config } from 'tailwindcss'
+import { rgbAlpha, toCssVar, toCssVars } from './src/utils/theme'
+import { breakpointsTokens } from './src/theme/tokens/breakpoints'
 
 const config: Config = {
-	content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
-	theme: {
-		colors: {
-			primary: toCssVars("colors.palette.primary"),
-			secondary: toCssVars("colors.palette.secondary"),
-			success: toCssVars("colors.palette.success"),
-			warning: toCssVars("colors.palette.warning"),
-			error: toCssVars("colors.palette.error"),
-			info: toCssVars("colors.palette.info"),
-			gray: toCssVars("colors.palette.gray"),
-			common: toCssVars("colors.common"),
-			text: toCssVars("colors.text"),
-			bg: toCssVars("colors.background"),
-			border: rgbAlpha(toCssVar("colors.palette.gray.500Channel"), 0.1),
-			hover: rgbAlpha(toCssVar("colors.palette.gray.500Channel"), 0.1),
-		},
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    colors: {
+      primary: toCssVars('colors.palette.primary'),
+      secondary: toCssVars('colors.palette.secondary'),
+      success: toCssVars('colors.palette.success'),
+      warning: toCssVars('colors.palette.warning'),
+      error: toCssVars('colors.palette.error'),
+      info: toCssVars('colors.palette.info'),
+      gray: toCssVars('colors.palette.gray'),
+      common: toCssVars('colors.common'),
+      text: toCssVars('colors.text'),
+      bg: toCssVars('colors.background'),
+      border: rgbAlpha(toCssVar('colors.palette.gray.500Channel'), 0.1),
+      hover: rgbAlpha(toCssVar('colors.palette.gray.500Channel'), 0.1)
+    },
 
-		opacity: toCssVars("opacity"),
-		screens: breakpointsTokens,
-		extend: {
-			borderRadius: toCssVars("borderRadius"),
-			boxShadow: toCssVars("shadows"),
-			spacing: toCssVars("spacing"),
-		},
-	},
+    opacity: toCssVars('opacity'),
+    screens: breakpointsTokens,
+    extend: {
+      borderRadius: toCssVars('borderRadius'),
+      boxShadow: toCssVars('shadows'),
+      spacing: toCssVars('spacing')
+    }
+  },
 
-	plugins: [],
-};
+  plugins: []
+}
 
-export default config;
+export default config