snowykami/neo-blog
1
0
Fork 0
mirror of https://github.com/snowykami/neo-blog.git synced 2025-09-26 11:06:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 实现用户认证上下文，重构相关组件以支持用户状态管理

Browse Source
This commit is contained in:
远野千束
2025-09-18 23:29:23 +08:00
parent 2fa462ae60
commit a2ce70278e
12 changed files with 147 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pkg/constant/constant.go
View File

@ -25,8 +25,8 @@ const (
EnvKeyPasswordSalt = "PASSWORD_SALT" // 环境变量：密码盐 EnvKeyPasswordSalt = "PASSWORD_SALT" // 环境变量：密码盐
EnvKeyTokenDuration = "TOKEN_DURATION" // 环境变量：令牌有效期 EnvKeyTokenDuration = "TOKEN_DURATION" // 环境变量：令牌有效期
EnvKeyMaxReplyDepth = "MAX_REPLY_DEPTH" // 环境变量：最大回复深度 EnvKeyMaxReplyDepth = "MAX_REPLY_DEPTH" // 环境变量：最大回复深度
EnvKeyTokenDurationDefault = 300 // Token有效时长 EnvKeyTokenDurationDefault = 30 // Token有效时长
EnvKeyRefreshTokenDurationDefault = 604800 // refresh token有效时长 EnvKeyRefreshTokenDurationDefault = 6000000 // refresh token有效时长
EnvKeyRefreshTokenDuration = "REFRESH_TOKEN_DURATION" // 环境变量：刷新令牌有效期 EnvKeyRefreshTokenDuration = "REFRESH_TOKEN_DURATION" // 环境变量：刷新令牌有效期
EnvKeyRefreshTokenDurationWithRemember = "REFRESH_TOKEN_DURATION_WITH_REMEMBER" // 环境变量：记住我刷新令牌有效期 EnvKeyRefreshTokenDurationWithRemember = "REFRESH_TOKEN_DURATION_WITH_REMEMBER" // 环境变量：记住我刷新令牌有效期
KVKeyEmailVerificationCode = "email_verification_code:" // KV存储：邮箱验证码 KVKeyEmailVerificationCode = "email_verification_code:" // KV存储：邮箱验证码

14
web/src/api/user.ts
View File

@ -47,13 +47,19 @@ export async function ListOidcConfigs(): Promise<BaseResponse<OidcConfig[]>> {
return res.data return res.data
} }
export async function getLoginUser(token: string = ''): Promise<BaseResponse<User>> { export async function getLoginUser(
{ token = '', refreshToken = '' }: { token?: string, refreshToken?: string } = {}
): Promise<BaseResponse<User>> {
if (token) {
const cookieParts = [`token=${token}`]
if (refreshToken) cookieParts.push(`refresh_token=${refreshToken}`)
const res = await axiosClient.get<BaseResponse<User>>('/user/me', { const res = await axiosClient.get<BaseResponse<User>>('/user/me', {
headers: { headers: { Cookie: cookieParts.join('; ') },
Authorization: `Bearer ${token}`,
},
}) })
return res.data return res.data
}
const res = await axiosClient.get<BaseResponse<User>>('/user/me')
return res.data
} }
export async function getUserById(id: number): Promise<BaseResponse<User>> { export async function getUserById(id: number): Promise<BaseResponse<User>> {

17
web/src/app/console/layout.tsx
View File

@ -7,29 +7,22 @@ import {
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
import { useToLogin } from "@/hooks/use-route" import { useToLogin } from "@/hooks/use-route"
import { useEffect, useState } from "react" import { useEffect } from "react"
import { User } from "@/models/user" import { useAuth } from "@/contexts/auth-context"
import { getLoginUser } from "@/api/user"
export default function ConsoleLayout({ export default function ConsoleLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const [user, setUser] = useState<User | null>(null); const { user } = useAuth();
const toLogin = useToLogin(); const toLogin = useToLogin();
useEffect(() => { useEffect(() => {
getLoginUser().then(res => { if (!user) {
setUser(res.data);
}).catch(() => {
setUser(null);
toLogin(); toLogin();
});
}, [toLogin]);
if (user === null) {
return null;
} }
}, [user, toLogin]);
return ( return (
<SidebarProvider <SidebarProvider

12
web/src/app/layout.tsx
View File

@ -1,12 +1,14 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { cookies } from "next/headers";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { DeviceProvider } from "@/contexts/device-context"; import { DeviceProvider } from "@/contexts/device-context";
import { NextIntlClientProvider } from 'next-intl'; import { NextIntlClientProvider } from 'next-intl';
import { AuthProvider } from "@/contexts/auth-context";
import config from "@/config"; import config from "@/config";
import { getFirstLocale } from '@/i18n/request'; import { getFirstLocale } from '@/i18n/request';
import { Toaster } from "@/components/ui/sonner" import { Toaster } from "@/components/ui/sonner"
import { getLoginUser } from "@/api/user";
import "./globals.css";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
subsets: ["latin"], subsets: ["latin"],
@ -27,6 +29,10 @@ export default async function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const token = (await cookies()).get("token")?.value || "";
const refreshToken = (await cookies()).get("refresh_token")?.value || "";
const user = await getLoginUser({token, refreshToken}).then(res => res.data).catch(() => null);
return ( return (
<html lang={await getFirstLocale() || "en"} className="h-full"> <html lang={await getFirstLocale() || "en"} className="h-full">
<body <body
@ -35,7 +41,9 @@ export default async function RootLayout({
<Toaster richColors position="top-center" offset={80} /> <Toaster richColors position="top-center" offset={80} />
<DeviceProvider> <DeviceProvider>
<NextIntlClientProvider> <NextIntlClientProvider>
<AuthProvider initialUser={user}>
{children} {children}
</AuthProvider>
</NextIntlClientProvider> </NextIntlClientProvider>
</DeviceProvider> </DeviceProvider>
</body> </body>

19
web/src/components/comment/index.tsx
View File

@ -1,6 +1,4 @@
"use client" "use client"
import { User } from "@/models/user";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { Suspense, useEffect, useState } from "react"; import { Suspense, useEffect, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
@ -12,9 +10,10 @@ import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { CommentInput } from "./comment-input"; import { CommentInput } from "./comment-input";
import { CommentItem } from "./comment-item"; import { CommentItem } from "./comment-item";
import { useAuth } from "@/contexts/auth-context";
import config from "@/config"; import config from "@/config";
import "./style.css"; import "./style.css";
import { getLoginUser } from "@/api/user";
export function CommentSection( export function CommentSection(
@ -29,7 +28,6 @@ export function CommentSection(
} }
) { ) {
const t = useTranslations('Comment') const t = useTranslations('Comment')
const [loginUser, setLoginUser] = useState<User | null>(null);
const [comments, setComments] = useState<Comment[]>([]); const [comments, setComments] = useState<Comment[]>([]);
const [activeInput, setActiveInput] = useState<{ id: number; type: 'reply' | 'edit' } | null>(null); const [activeInput, setActiveInput] = useState<{ id: number; type: 'reply' | 'edit' } | null>(null);
const [page, setPage] = useState(1); // 当前页码 const [page, setPage] = useState(1); // 当前页码
@ -37,14 +35,7 @@ export function CommentSection(
const [needLoadMore, setNeedLoadMore] = useState(true); // 是否需要加载更多，当最后一次获取的评论数小于分页大小时设为false const [needLoadMore, setNeedLoadMore] = useState(true); // 是否需要加载更多，当最后一次获取的评论数小于分页大小时设为false
// 获取登录用户信息 // 获取登录用户信息
useEffect(() => { const {user} = useAuth();
getLoginUser().then(res => {
setLoginUser(res.data);
console.log("login user:", res.data);
}).catch(() => {
setLoginUser(null);
});
}, []);
// 加载0/顶层评论 // 加载0/顶层评论
useEffect(() => { useEffect(() => {
listComments({ listComments({
@ -118,7 +109,7 @@ export function CommentSection(
<Separator className="my-16" /> <Separator className="my-16" />
<div className="font-bold text-2xl">{t("comment")} ({totalCommentCount})</div> <div className="font-bold text-2xl">{t("comment")} ({totalCommentCount})</div>
<CommentInput <CommentInput
user={loginUser} user={user}
onCommentSubmitted={onCommentSubmitted} onCommentSubmitted={onCommentSubmitted}
/> />
<div className="mt-4"> <div className="mt-4">
@ -127,7 +118,7 @@ export function CommentSection(
<div key={comment.id} className="" style={{ animationDelay: `${idx * 60}ms` }}> <div key={comment.id} className="" style={{ animationDelay: `${idx * 60}ms` }}>
<Separator className="my-2" /> <Separator className="my-2" />
<CommentItem <CommentItem
loginUser={loginUser} loginUser={user}
comment={comment} comment={comment}
parentComment={null} parentComment={null}
onCommentDelete={onCommentDelete} onCommentDelete={onCommentDelete}

34
web/src/components/console/app-sidebar.tsx
View File

@ -1,12 +1,7 @@
"use client" "use client"
import { useEffect, useState } from "react"
import { import {
IconChartBar,
IconDashboard,
IconFolder,
IconInnerShadowTop, IconInnerShadowTop,
IconListDetails,
IconUsers,
} from "@tabler/icons-react" } from "@tabler/icons-react"
import { NavMain } from "@/components/console/nav-main" import { NavMain } from "@/components/console/nav-main"
@ -22,52 +17,39 @@ import {
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
import config from "@/config" import config from "@/config"
import Link from "next/link" import Link from "next/link"
import { getLoginUser } from "@/api/user" import { Folder, Gauge, MessageCircle, Newspaper, Users } from "lucide-react"
import { User } from "@/models/user"
const data = { const data = {
navMain: [ navMain: [
{ {
title: "大石坝", title: "大石坝",
url: "/console", url: "/console",
icon: IconDashboard, icon: Gauge,
}, },
{ {
title: "文章管理", title: "文章管理",
url: "/console/post", url: "/console/post",
icon: IconListDetails, icon: Newspaper,
}, },
{ {
title: "评论管理", title: "评论管理",
url: "/console/comment", url: "/console/comment",
icon: IconChartBar, icon: MessageCircle,
}, },
{ {
title: "文件管理", title: "文件管理",
url: "/console/file", url: "/console/file",
icon: IconFolder, icon: Folder,
}, },
{ {
title: "用户管理", title: "用户管理",
url: "/console/user", url: "/console/user",
icon: IconUsers, icon: Users,
}, },
] ]
} }
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) { export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const [loginUser, setLoginUser] = useState<User | null>(null);
useEffect(() => {
getLoginUser().then(resp => {
setLoginUser(resp.data);
});
}, [])
if (!loginUser) {
return null; // 或者返回一个加载指示器
}
return ( return (
<Sidebar collapsible="offcanvas" {...props}> <Sidebar collapsible="offcanvas" {...props}>
<SidebarHeader> <SidebarHeader>
@ -89,7 +71,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<NavMain items={data.navMain} /> <NavMain items={data.navMain} />
</SidebarContent> </SidebarContent>
<SidebarFooter> <SidebarFooter>
<NavUser user={loginUser} /> <NavUser />
</SidebarFooter> </SidebarFooter>
</Sidebar> </Sidebar>
) )

12
web/src/components/console/nav-main.tsx
View File

@ -1,7 +1,5 @@
"use client" "use client"
import { type Icon } from "@tabler/icons-react"
import { import {
SidebarGroup, SidebarGroup,
SidebarGroupContent, SidebarGroupContent,
@ -10,6 +8,9 @@ import {
SidebarMenuItem, SidebarMenuItem,
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
import Link from "next/link" import Link from "next/link"
import type { LucideProps } from "lucide-react";
import { ComponentType, SVGProps } from "react"
import { usePathname } from "next/navigation";
export function NavMain({ export function NavMain({
items, items,
@ -17,9 +18,12 @@ export function NavMain({
items: { items: {
title: string title: string
url: string url: string
icon?: Icon icon?: ComponentType<SVGProps<SVGSVGElement> & LucideProps>;
}[] }[]
}) { }) {
const pathname = usePathname() ?? "/"
console.log("pathname", pathname)
return ( return (
<SidebarGroup> <SidebarGroup>
<SidebarGroupContent className="flex flex-col gap-2"> <SidebarGroupContent className="flex flex-col gap-2">
@ -27,7 +31,7 @@ export function NavMain({
{items.map((item) => ( {items.map((item) => (
<SidebarMenuItem key={item.title}> <SidebarMenuItem key={item.title}>
<Link href={item.url}> <Link href={item.url}>
<SidebarMenuButton tooltip={item.title}> <SidebarMenuButton tooltip={item.title} isActive={pathname===item.url}>
{item.icon && <item.icon />} {item.icon && <item.icon />}
<span>{item.title}</span> <span>{item.title}</span>
</SidebarMenuButton> </SidebarMenuButton>

4
web/src/components/console/nav-user.tsx
View File

@ -35,10 +35,10 @@ import { getFallbackAvatarFromUsername } from "@/utils/common/username"
export function NavUser({ export function NavUser({
user, user,
}: { }: {
user: User user?: User
}) { }) {
const { isMobile } = useSidebar() const { isMobile } = useSidebar()
if (!user) return null
return ( return (
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>

14
web/src/components/layout/avatar-with-dropdown-menu.tsx
View File

@ -8,9 +8,7 @@ import {
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu" } from "@/components/ui/dropdown-menu"
import { User } from "@/models/user"; import { userLogout } from "@/api/user";
import { useEffect, useState } from "react";
import { getLoginUser, userLogout } from "@/api/user";
import Link from "next/link"; import Link from "next/link";
import { toast } from "sonner"; import { toast } from "sonner";
import { useToLogin } from "@/hooks/use-route"; import { useToLogin } from "@/hooks/use-route";
@ -18,17 +16,11 @@ import { CircleUser } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { getGravatarFromUser } from "@/utils/common/gravatar"; import { getGravatarFromUser } from "@/utils/common/gravatar";
import { getFallbackAvatarFromUsername } from "@/utils/common/username"; import { getFallbackAvatarFromUsername } from "@/utils/common/username";
import { useAuth } from "@/contexts/auth-context";
export function AvatarWithDropdownMenu() { export function AvatarWithDropdownMenu() {
const [user, setUser] = useState<User | null>(null); const {user} = useAuth();
const toLogin = useToLogin(); const toLogin = useToLogin();
useEffect(() => {
getLoginUser().then(res => {
setUser(res.data);
}).catch(() => {
setUser(null);
});
}, []);
const handleLogout = () => { const handleLogout = () => {
userLogout().then(() => { userLogout().then(() => {

38
web/src/contexts/auth-context.tsx Normal file
View File

@ -0,0 +1,38 @@
"use client";
import React, { createContext, useContext, useState, useMemo } from "react";
import type { User } from "@/models/user";
import { userLogout } from "@/api/user";
type AuthContextValue = {
user: User | null;
setUser: (u: User | null) => void;
logout: () => void;
};
const AuthContext = createContext<AuthContextValue | undefined>(undefined);
export function AuthProvider({
children,
initialUser = null,
}: {
children: React.ReactNode;
initialUser?: User | null;
}) {
const [user, setUser] = useState<User | null>(initialUser);
const logout = async () => {
setUser(null);
await userLogout();
};
const value = useMemo(() => ({ user, setUser, logout }), [user]);
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}
export function useAuth() {
const ctx = useContext(AuthContext);
if (!ctx) {
throw new Error("useAuth must be used within an AuthProvider");
}
return ctx;
}

3
web/src/i18n/request.ts
View File

@ -26,7 +26,8 @@ export async function getUserLocales(): Promise<string[]> {
const cookieStore = await cookies(); const cookieStore = await cookies();
try { try {
const token = cookieStore.get('token')?.value || ''; const token = cookieStore.get('token')?.value || '';
const user = (await getLoginUser(token)).data; const refreshToken = cookieStore.get('refresh_token')?.value || '';
const user = (await getLoginUser({token, refreshToken})).data;
locales.push(user.language); locales.push(user.language);
locales.push(user.language.split('-')[0]); locales.push(user.language.split('-')[0]);
} catch { } catch {

1
web/src/utils/common/gravatar.ts
View File

@ -12,7 +12,6 @@ import type { User } from '@/models/user';
export function getGravatarUrl({ email, size, proxy }: { email: string, size?: number, proxy?: string }): string { export function getGravatarUrl({ email, size, proxy }: { email: string, size?: number, proxy?: string }): string {
const hash = md5(email.trim().toLowerCase()); const hash = md5(email.trim().toLowerCase());
console.log(`https://${proxy ? proxy : "www.gravatar.com"}/avatar/${hash}?s=${size}&d=identicon`)
return `https://${proxy ? proxy : "www.gravatar.com"}/avatar/${hash}?s=${size}&d=identicon`; return `https://${proxy ? proxy : "www.gravatar.com"}/avatar/${hash}?s=${size}&d=identicon`;
} }