feat: 添加用户认证功能,包括登录、注册、GitHub/Gitee OAuth集成及相关路由配置。
This commit is contained in:
63
src/pages/GiteeCallback/GiteeCallback.tsx
Normal file
63
src/pages/GiteeCallback/GiteeCallback.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/pages/GiteeCallback/index.ts
Normal file
1
src/pages/GiteeCallback/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default } from './GiteeCallback';
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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>,
|
||||||
|
|||||||
@@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user