AuthProvider.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. import React, { useState, createContext, useContext } from 'react';
  2. import {
  3. useQuery,
  4. useQueryClient,
  5. } from '@tanstack/react-query';
  6. import axios from 'axios';
  7. import { tenantClientManager } from '../api/tenantClient';
  8. // 租户超级管理员用户类型
  9. type TenantSuperAdmin = {
  10. userId: number;
  11. username: string;
  12. message: string;
  13. };
  14. type User = TenantSuperAdmin;
  15. // 认证上下文类型
  16. interface AuthContextType<T = User> {
  17. user: T | null;
  18. token: string | null;
  19. login: (username: string, password: string) => Promise<void>;
  20. logout: () => Promise<void>;
  21. isAuthenticated: boolean;
  22. isLoading: boolean;
  23. }
  24. // 创建认证上下文
  25. const AuthContext = createContext<AuthContextType<User> | null>(null);
  26. // 租户认证提供器组件 - 专门用于租户超级管理员认证
  27. export const TenantAuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  28. const [user, setUser] = useState<User | null>(null);
  29. const [token, setToken] = useState<string | null>(localStorage.getItem('tenant-token'));
  30. const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
  31. const queryClient = useQueryClient();
  32. // 声明handleLogout函数
  33. const handleLogout = async () => {
  34. try {
  35. // 租户超级管理员登出不需要调用API,直接清除本地状态
  36. } catch (error) {
  37. console.error('登出请求失败:', error);
  38. } finally {
  39. // 清除本地状态
  40. setToken(null);
  41. setUser(null);
  42. setIsAuthenticated(false);
  43. localStorage.removeItem('tenant-token');
  44. // 清除Authorization头
  45. delete axios.defaults.headers.common['Authorization'];
  46. console.log('登出时已删除全局Authorization头');
  47. // 清除所有查询缓存
  48. queryClient.clear();
  49. }
  50. };
  51. // 使用useQuery检查登录状态
  52. const { isLoading } = useQuery({
  53. queryKey: ['tenant-auth', 'status', token],
  54. queryFn: async () => {
  55. if (!token) {
  56. setIsAuthenticated(false);
  57. setUser(null);
  58. return null;
  59. }
  60. try {
  61. // 设置全局默认请求头
  62. axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  63. // 租户超级管理员不需要验证用户信息,直接认为有效
  64. // 因为租户认证使用固定的超级管理员账号
  65. const currentUser: User = {
  66. userId: 1,
  67. username: 'superadmin',
  68. message: '租户超级管理员'
  69. };
  70. setUser(currentUser);
  71. setIsAuthenticated(true);
  72. return { isValid: true, user: currentUser };
  73. } catch (error) {
  74. return { isValid: false };
  75. }
  76. },
  77. enabled: !!token,
  78. refetchOnWindowFocus: false,
  79. retry: false
  80. });
  81. const handleLogin = async (username: string, password: string): Promise<void> => {
  82. try {
  83. // 使用租户认证RPC客户端登录
  84. const response = await tenantClientManager.get().login.$post({
  85. json: {
  86. username,
  87. password
  88. }
  89. });
  90. if (!response.ok) {
  91. const result = await response.json();
  92. throw new Error(result.message || '登录失败');
  93. }
  94. const result = await response.json();
  95. // 保存token和用户信息
  96. const { token: newToken, userId, username: responseUsername } = result;
  97. // 设置全局默认请求头
  98. axios.defaults.headers.common['Authorization'] = `Bearer ${newToken}`;
  99. // 保存状态
  100. setToken(newToken);
  101. setUser({
  102. userId,
  103. username: responseUsername,
  104. message: '租户超级管理员'
  105. });
  106. setIsAuthenticated(true);
  107. localStorage.setItem('tenant-token', newToken);
  108. } catch (error) {
  109. console.error('登录失败:', error);
  110. throw error;
  111. }
  112. };
  113. return (
  114. <AuthContext.Provider
  115. value={{
  116. user,
  117. token,
  118. login: handleLogin,
  119. logout: handleLogout,
  120. isAuthenticated,
  121. isLoading
  122. }}
  123. >
  124. {children}
  125. </AuthContext.Provider>
  126. );
  127. };
  128. // 使用上下文的钩子
  129. export const useAuth = () => {
  130. const context = useContext(AuthContext);
  131. if (!context) {
  132. throw new Error('useAuth必须在TenantAuthProvider内部使用');
  133. }
  134. return context;
  135. };