refactor(auth): standardize authorization token handling
- Replace 'token' with 'Authorization' in localStorage keys for consistency - Update auth guard, request interceptor and login hooks to use new key - Add updateAuthorization method to auth hook for better state management
This commit is contained in:
@@ -11,8 +11,8 @@ const AuthGuard: React.FC<AuthGuardProps> = ({ children }) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// 直接从localStorage检查token,避免React状态更新的延迟
|
||||
const token = localStorage.getItem('token');
|
||||
const isAuthenticated = !!token;
|
||||
const authorization = localStorage.getItem('Authorization');
|
||||
const isAuthenticated = !!authorization;
|
||||
const isLoginPage = location.pathname === '/login';
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -33,7 +33,7 @@ export const useOAuthCallback = () => {
|
||||
const auth = searchParams.get('auth');
|
||||
if (auth) {
|
||||
// 存储认证信息
|
||||
localStorage.setItem('token', auth);
|
||||
localStorage.setItem('Authorization', auth);
|
||||
newSearchParams.delete('auth');
|
||||
setSearchParams(newSearchParams);
|
||||
navigate('/');
|
||||
@@ -56,36 +56,40 @@ export const useAuth = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [searchParams] = useSearchParams();
|
||||
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
|
||||
const [userInfo, setUserInfo] = useState<any>(null);
|
||||
const [token, setToken] = useState<string | null>(null);
|
||||
const [authorization, setAuthorization] = useState<string | null>(null);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
// OAuth回调处理
|
||||
const auth = useOAuthCallback();
|
||||
|
||||
const isAuthenticated = useMemo(() => authorization !== null && authorization !== '', [authorization]);
|
||||
|
||||
// 检查认证状态
|
||||
const checkAuthStatus = () => {
|
||||
try {
|
||||
const storedToken = localStorage.getItem('token');
|
||||
const storedAuthorization = localStorage.getItem('Authorization');
|
||||
const storedUserInfo = localStorage.getItem('userInfo');
|
||||
|
||||
if (storedToken) {
|
||||
if (storedAuthorization) {
|
||||
setToken(storedToken);
|
||||
setIsAuthenticated(true);
|
||||
setAuthorization(storedAuthorization);
|
||||
|
||||
if (storedUserInfo) {
|
||||
setUserInfo(JSON.parse(storedUserInfo));
|
||||
}
|
||||
} else {
|
||||
setToken(null);
|
||||
setIsAuthenticated(false);
|
||||
setAuthorization(null);
|
||||
setUserInfo(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking auth status:', error);
|
||||
setToken(null);
|
||||
setIsAuthenticated(false);
|
||||
setAuthorization(null);
|
||||
setUserInfo(null);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
@@ -97,16 +101,19 @@ export const useAuth = () => {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('userInfo');
|
||||
setToken(null);
|
||||
setIsAuthenticated(false);
|
||||
setUserInfo(null);
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const updateAuthorization = (newAuthorization: string) => {
|
||||
setAuthorization(newAuthorization);
|
||||
localStorage.setItem('Authorization', newAuthorization);
|
||||
};
|
||||
|
||||
// 更新认证状态
|
||||
const updateAuthStatus = (newToken: string, newUserInfo: any) => {
|
||||
setToken(newToken);
|
||||
setUserInfo(newUserInfo);
|
||||
setIsAuthenticated(true);
|
||||
localStorage.setItem('token', newToken);
|
||||
localStorage.setItem('userInfo', JSON.stringify(newUserInfo));
|
||||
};
|
||||
@@ -142,6 +149,7 @@ export const useAuth = () => {
|
||||
isLoading,
|
||||
checkAuthStatus,
|
||||
logout,
|
||||
updateAuthorization,
|
||||
updateAuthStatus,
|
||||
redirectToLogin,
|
||||
redirectAfterLogin,
|
||||
@@ -180,13 +188,17 @@ export const useLogin = () => {
|
||||
password: encryptedPassword
|
||||
});
|
||||
|
||||
const { data: res = {} } = response;
|
||||
const { data: res = {}, headers } = response;
|
||||
|
||||
const authorization: string = headers['authorization'] ?? headers['Authorization'] ?? '';
|
||||
|
||||
localStorage.setItem('Authorization', authorization);
|
||||
const { code, message } = res;
|
||||
|
||||
if (code === 0) {
|
||||
// 登录成功,处理token和用户信息
|
||||
const { data: userData } = res;
|
||||
const token = userData.access_token;
|
||||
const token: string = userData.access_token;
|
||||
const userInfo = {
|
||||
...userData,
|
||||
avatar: userData.avatar,
|
||||
|
||||
@@ -47,12 +47,12 @@ export type ResultCode =
|
||||
|
||||
// 获取授权token
|
||||
const getAuthorization = (): string => {
|
||||
return localStorage.getItem('token') || '';
|
||||
return localStorage.getItem(Authorization) || '';
|
||||
};
|
||||
|
||||
// 重定向到登录页
|
||||
const redirectToLogin = (): void => {
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem(Authorization);
|
||||
window.location.href = '/login';
|
||||
};
|
||||
|
||||
@@ -94,9 +94,9 @@ request.interceptors.request.use(
|
||||
}
|
||||
|
||||
// 添加授权头
|
||||
const token = getAuthorization();
|
||||
if (token && !config.headers?.skipToken) {
|
||||
config.headers[Authorization] = token;
|
||||
const authorization = getAuthorization();
|
||||
if (authorization && !config.headers?.skipToken) {
|
||||
config.headers.Authorization = authorization;
|
||||
}
|
||||
|
||||
return config;
|
||||
|
||||
Reference in New Issue
Block a user