feat: 实现用户认证功能,包括登录、注册、OAuth回调和相关路由及服务。

This commit is contained in:
2026-01-29 13:13:34 +08:00
parent 842257165b
commit c5b904e159
8 changed files with 114 additions and 15 deletions

View File

@@ -1 +0,0 @@
export { default } from './GitHubCallback';

View File

@@ -415,6 +415,32 @@
transform: rotate(-8deg) scale(1.1); transform: rotate(-8deg) scale(1.1);
} }
/* Gitee Button */
.login-button--gitee {
background: #ffffff;
color: #c71d23;
border: 1.5px solid #e5e7eb;
margin-top: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.login-button--gitee:hover {
background: #fef2f2;
border-color: #fecaca;
color: #b91c1c;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(199, 29, 35, 0.12);
}
.login-button--gitee svg {
transition: transform 0.3s;
}
.login-button--gitee:hover svg {
transform: scale(1.1);
}
/* ===================== DIVIDER ===================== */ /* ===================== DIVIDER ===================== */
.login-divider { .login-divider {
display: flex; display: flex;

View File

@@ -176,6 +176,15 @@ export default function Login({ mode = 'login' }: LoginProps) {
<Icon icon="mdi:github" width="20" /> <Icon icon="mdi:github" width="20" />
使 GitHub 使 GitHub
</a> </a>
<a
href={authService.getGiteeLoginUrl()}
className="login-button login-button--gitee"
style={{ textDecoration: 'none' }}
>
<Icon icon="simple-icons:gitee" width="20" />
使 Gitee
</a>
</form> </form>
<div className="login-footer"> <div className="login-footer">

View File

@@ -1,4 +1,4 @@
.github-callback-page { .oauth-callback-page {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -7,7 +7,7 @@
padding: 1rem; padding: 1rem;
} }
.github-callback-container { .oauth-callback-container {
background: var(--card-bg); background: var(--card-bg);
border-radius: 1rem; border-radius: 1rem;
padding: 3rem 2rem; padding: 3rem 2rem;

View File

@@ -1,14 +1,23 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom'; import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
import { Icon } from '@iconify/react'; import { Icon } from '@iconify/react';
import authService from '../../services/authService'; import authService from '../../services/authService';
import './GitHubCallback.css'; import './OAuthCallback.css';
export default function GitHubCallback() { interface OAuthCallbackProps {
provider?: 'github' | 'gitee';
}
export default function OAuthCallback({ provider: propProvider }: OAuthCallbackProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [error, setError] = useState(''); const [error, setError] = useState('');
// Determine provider from prop or path
const provider = propProvider || (location.pathname.includes('gitee') ? 'gitee' : 'github');
const providerName = provider === 'github' ? 'GitHub' : 'Gitee';
useEffect(() => { useEffect(() => {
const handleCallback = async () => { const handleCallback = async () => {
const errorParam = searchParams.get('error'); const errorParam = searchParams.get('error');
@@ -16,7 +25,7 @@ export default function GitHubCallback() {
const refreshToken = searchParams.get('refresh_token'); const refreshToken = searchParams.get('refresh_token');
if (errorParam) { if (errorParam) {
setError('GitHub 授权失败'); setError(`${providerName} 授权失败`);
setTimeout(() => navigate('/login'), 2000); setTimeout(() => navigate('/login'), 2000);
return; return;
} }
@@ -41,20 +50,24 @@ export default function GitHubCallback() {
} }
try { try {
await authService.handleGitHubCallback(code); if (provider === 'gitee') {
await authService.handleGiteeCallback(code);
} else {
await authService.handleGitHubCallback(code);
}
navigate('/home'); navigate('/home');
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'GitHub 登录失败'); setError(err instanceof Error ? err.message : `${providerName} 登录失败`);
setTimeout(() => navigate('/login'), 2000); setTimeout(() => navigate('/login'), 2000);
} }
}; };
handleCallback(); handleCallback();
}, [searchParams, navigate]); }, [searchParams, navigate, provider, providerName]);
return ( return (
<div className="github-callback-page"> <div className="oauth-callback-page">
<div className="github-callback-container"> <div className="oauth-callback-container">
{error ? ( {error ? (
<> <>
<Icon icon="solar:close-circle-bold-duotone" width="48" className="callback-icon error" /> <Icon icon="solar:close-circle-bold-duotone" width="48" className="callback-icon error" />
@@ -65,7 +78,7 @@ export default function GitHubCallback() {
) : ( ) : (
<> <>
<Icon icon="svg-spinners:ring-resize" width="48" className="callback-icon" /> <Icon icon="svg-spinners:ring-resize" width="48" className="callback-icon" />
<h2 className="callback-title"> GitHub </h2> <h2 className="callback-title"> {providerName} </h2>
<p className="callback-message">...</p> <p className="callback-message">...</p>
</> </>
)} )}

View File

@@ -0,0 +1 @@
export { default } from './OAuthCallback';

View File

@@ -14,7 +14,7 @@ import LoanCalculatorPage from '../pages/LoanCalculatorPage';
import TaxCalculatorPage from '../pages/TaxCalculatorPage'; import TaxCalculatorPage from '../pages/TaxCalculatorPage';
import Login from '../pages/Login/Login'; import Login from '../pages/Login/Login';
import Profile from '../pages/Profile'; import Profile from '../pages/Profile';
import GitHubCallback from '../pages/GitHubCallback'; import OAuthCallback from '../pages/OAuthCallback/OAuthCallback';
import Notifications from '../pages/Notifications'; import Notifications from '../pages/Notifications';
import Layout from '../components/common/Layout'; import Layout from '../components/common/Layout';
import ProtectedRoute from '../components/common/ProtectedRoute'; import ProtectedRoute from '../components/common/ProtectedRoute';
@@ -34,7 +34,11 @@ export const router = createBrowserRouter([
}, },
{ {
path: '/auth/github/callback', path: '/auth/github/callback',
element: <GitHubCallback />, element: <OAuthCallback provider="github" />,
},
{
path: '/auth/gitee/callback',
element: <OAuthCallback provider="gitee" />,
}, },
{ {
path: '/', path: '/',

View File

@@ -178,6 +178,50 @@ export async function handleGitHubCallback(code: string): Promise<{ user: User;
throw new Error('GitHub authentication failed'); throw new Error('GitHub authentication failed');
} }
/**
* Get Gitee OAuth login URL
*/
export function getGiteeLoginUrl(state?: string): string {
// 强制修正:如果不是本地开发环境,必须使用相对路径
const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
const baseUrl = isLocal
? (import.meta.env.VITE_API_BASE_URL || 'http://localhost:2612/api/v1')
: '/api/v1';
// 处理相对路径问题URL构造函数依然需要完整的 base 才能处理相对路径
let fullUrlString;
if (baseUrl.startsWith('/')) {
fullUrlString = `${window.location.origin}${baseUrl}/auth/gitee`;
} else {
fullUrlString = `${baseUrl}/auth/gitee`;
}
const url = new URL(fullUrlString);
if (state) {
url.searchParams.append('state', state);
}
return url.toString();
}
/**
* Redirect to Gitee OAuth login
*/
export function loginWithGitee(state?: string): void {
window.location.href = getGiteeLoginUrl(state);
}
/**
* Handle Gitee OAuth callback
*/
export async function handleGiteeCallback(code: string): Promise<{ user: User; tokens: TokenPair }> {
const response = await api.get<AuthResponse>('/auth/gitee/callback', { code });
if (response.success && response.data) {
setTokens(response.data.tokens);
return response.data;
}
throw new Error('Gitee authentication failed');
}
/** /**
* Get current user information * Get current user information
*/ */
@@ -215,6 +259,9 @@ export default {
loginWithGitHub, loginWithGitHub,
getGitHubLoginUrl, getGitHubLoginUrl,
handleGitHubCallback, handleGitHubCallback,
loginWithGitee,
getGiteeLoginUrl,
handleGiteeCallback,
getCurrentUser, getCurrentUser,
updatePassword, updatePassword,
}; };