feat: 添加用户认证功能,包括登录、注册、GitHub/Gitee OAuth集成及相关路由配置。

This commit is contained in:
2026-01-29 19:07:23 +08:00
parent 842257165b
commit 0b3a7b1d79
6 changed files with 135 additions and 0 deletions

View File

@@ -0,0 +1,63 @@
import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Icon } from '@iconify/react';
import authService from '../../services/authService';
import '../GitHubCallback/GitHubCallback.css';
export default function GiteeCallback() {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const [error, setError] = useState('');
useEffect(() => {
const handleCallback = async () => {
const errorParam = searchParams.get('error');
const accessToken = searchParams.get('access_token');
const refreshToken = searchParams.get('refresh_token');
if (errorParam) {
setError('Gitee 授权失败');
setTimeout(() => navigate('/login'), 2000);
return;
}
// 如果URL中有token直接保存
if (accessToken && refreshToken) {
authService.setTokens({
access_token: accessToken,
refresh_token: refreshToken,
expires_in: 3600,
});
navigate('/home');
return;
}
// 没有必要的参数
setError('缺少授权信息');
setTimeout(() => navigate('/login'), 2000);
};
handleCallback();
}, [searchParams, navigate]);
return (
<div className="github-callback-page">
<div className="github-callback-container">
{error ? (
<>
<Icon icon="solar:close-circle-bold-duotone" width="48" className="callback-icon error" />
<h2 className="callback-title"></h2>
<p className="callback-message">{error}</p>
<p className="callback-redirect">...</p>
</>
) : (
<>
<Icon icon="svg-spinners:ring-resize" width="48" className="callback-icon" />
<h2 className="callback-title"> Gitee </h2>
<p className="callback-message">...</p>
</>
)}
</div>
</div>
);
}

View File

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

View File

@@ -415,6 +415,29 @@
transform: rotate(-8deg) scale(1.1); transform: rotate(-8deg) scale(1.1);
} }
/* Gitee Button */
.login-button--gitee {
background: linear-gradient(135deg, #c71d23 0%, #d0343a 100%);
color: white;
border: none;
margin-top: 0.5rem;
box-shadow: 0 4px 12px rgba(199, 29, 35, 0.25);
}
.login-button--gitee:hover {
background: linear-gradient(135deg, #b01920 0%, #c71d23 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(199, 29, 35, 0.35);
}
.login-button--gitee svg {
transition: transform 0.3s;
}
.login-button--gitee:hover svg {
transform: rotate(-8deg) 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

@@ -15,6 +15,7 @@ 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 GitHubCallback from '../pages/GitHubCallback';
import GiteeCallback from '../pages/GiteeCallback';
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';
@@ -36,6 +37,10 @@ export const router = createBrowserRouter([
path: '/auth/github/callback', path: '/auth/github/callback',
element: <GitHubCallback />, element: <GitHubCallback />,
}, },
{
path: '/auth/gitee/callback',
element: <GiteeCallback />,
},
{ {
path: '/', path: '/',
element: <ProtectedRoute><Layout /></ProtectedRoute>, element: <ProtectedRoute><Layout /></ProtectedRoute>,

View File

@@ -178,6 +178,38 @@ 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';
console.log('[Auth] Generating Gitee URL with base:', baseUrl);
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);
}
/** /**
* Get current user information * Get current user information
*/ */
@@ -215,6 +247,8 @@ export default {
loginWithGitHub, loginWithGitHub,
getGitHubLoginUrl, getGitHubLoginUrl,
handleGitHubCallback, handleGitHubCallback,
loginWithGitee,
getGiteeLoginUrl,
getCurrentUser, getCurrentUser,
updatePassword, updatePassword,
}; };