siyu-bank/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

React - 账号密码登录

Browse Source
This commit is contained in:
柳清爽
2025-03-29 17:02:40 +08:00
parent 7e7c199996
commit 870cec6978
4 changed files with 325 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
Cunkebao/app/components/AuthProvider.tsx
View File

@@ -2,19 +2,51 @@
import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
import { useRouter } from "next/navigation"
import { validateToken } from "@/lib/api"
// 安全的localStorage访问方法
const safeLocalStorage = {
getItem: (key: string): string | null => {
if (typeof window !== 'undefined') {
return localStorage.getItem(key)
}
return null
},
setItem: (key: string, value: string): void => {
if (typeof window !== 'undefined') {
localStorage.setItem(key, value)
}
},
removeItem: (key: string): void => {
if (typeof window !== 'undefined') {
localStorage.removeItem(key)
}
}
}
interface User {
id: number;
username: string;
account?: string;
avatar?: string;
}
interface AuthContextType {
isAuthenticated: boolean
token: string | null
login: (token: string) => void
user: User | null
login: (token: string, userData: User) => void
logout: () => void
updateToken: (newToken: string) => void
}
const AuthContext = createContext<AuthContextType>({
isAuthenticated: false,
token: null,
user: null,
login: () => {},
logout: () => {},
updateToken: () => {}
})
export const useAuth = () => useContext(AuthContext)
@@ -25,43 +57,82 @@ interface AuthProviderProps {
export function AuthProvider({ children }: AuthProviderProps) {
const [token, setToken] = useState<string | null>(null)
const [user, setUser] = useState<User | null>(null)
const [isAuthenticated, setIsAuthenticated] = useState(false)
const [isLoading, setIsLoading] = useState(true)
const router = useRouter()
// 检查token有效性并初始化认证状态
useEffect(() => {
// 客户端检查token
if (typeof window !== "undefined") {
const storedToken = localStorage.getItem("token")
const initAuth = async () => {
setIsLoading(true)
const storedToken = safeLocalStorage.getItem("token")
if (storedToken) {
setToken(storedToken)
setIsAuthenticated(true)
} else {
setIsAuthenticated(false)
// 暂时禁用重定向逻辑，允许访问所有页面
// 将来需要恢复登录验证时，取消下面注释
/*
if (pathname !== "/login") {
router.push("/login")
try {
// 验证token是否有效
const isValid = await validateToken()
if (isValid) {
// 从localStorage获取用户信息
const userDataStr = safeLocalStorage.getItem("user")
if (userDataStr) {
const userData = JSON.parse(userDataStr) as User
setToken(storedToken)
setUser(userData)
setIsAuthenticated(true)
} else {
// token有效但没有用户信息，清除token
handleLogout()
}
} else {
// token无效，清除
handleLogout()
}
} catch (error) {
console.error("验证token时出错:", error)
handleLogout()
}
*/
}
setIsLoading(false)
}
initAuth()
}, [])
const login = (newToken: string) => {
localStorage.setItem("token", newToken)
const handleLogout = () => {
safeLocalStorage.removeItem("token")
safeLocalStorage.removeItem("user")
setToken(null)
setUser(null)
setIsAuthenticated(false)
}
const login = (newToken: string, userData: User) => {
safeLocalStorage.setItem("token", newToken)
safeLocalStorage.setItem("user", JSON.stringify(userData))
setToken(newToken)
setUser(userData)
setIsAuthenticated(true)
}
const logout = () => {
localStorage.removeItem("token")
setToken(null)
setIsAuthenticated(false)
handleLogout()
// 登出后不强制跳转到登录页
// router.push("/login")
}
return <AuthContext.Provider value={{ isAuthenticated, token, login, logout }}>{children}</AuthContext.Provider>
// 用于刷新 token 的方法
const updateToken = (newToken: string) => {
safeLocalStorage.setItem("token", newToken)
setToken(newToken)
}
return (
<AuthContext.Provider value={{ isAuthenticated, token, user, login, logout, updateToken }}>
{isLoading ? <div className="flex h-screen w-screen items-center justify-center">加载中...</div> : children}
</AuthContext.Provider>
)
}

196
Cunkebao/app/login/page.tsx
View File

@@ -11,19 +11,10 @@ import { useRouter } from "next/navigation"
import { WeChatIcon } from "@/components/icons/wechat-icon"
import { AppleIcon } from "@/components/icons/apple-icon"
import { useToast } from "@/components/ui/use-toast"
import { useAuth } from "@/app/components/AuthProvider"
import { loginApi } from "@/lib/api"
// 使用环境变量获取API域名
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.example.com"
// 定义登录响应类型
interface LoginResponse {
code: number
message: string
data?: {
token: string
}
}
// 定义登录表单类型
interface LoginForm {
phone: string
password: string
@@ -44,6 +35,7 @@ export default function LoginPage() {
const router = useRouter()
const { toast } = useToast()
const { login, isAuthenticated } = useAuth()
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target
@@ -101,38 +93,40 @@ export default function LoginPage() {
setIsLoading(true)
try {
// 创建FormData对象
const formData = new FormData()
formData.append("phone", form.phone)
if (activeTab === "password") {
formData.append("password", form.password)
// 发送账号密码登录请求
const response = await loginApi.login(form.phone, form.password)
if (response.code === 200 && response.data) {
// 获取用户信息和token
const { token, token_expired, member } = response.data
// 保存token和用户信息
login(token, {
id: member.id,
username: member.username || member.account || '',
account: member.account,
avatar: member.avatar
})
// 显示成功提示
toast({
title: "登录成功",
description: "欢迎回来！",
})
// 跳转到首页
router.push("/")
} else {
throw new Error(response.msg || "登录失败")
}
} else {
formData.append("verificationCode", form.verificationCode)
}
// 发送登录请求
const response = await fetch(`${API_BASE_URL}/auth/login`, {
method: "POST",
body: formData,
// 不需要设置Content-Type，浏览器会自动设置为multipart/form-data并添加boundary
})
const result: LoginResponse = await response.json()
if (result.code === 10000 && result.data?.token) {
// 保存token到localStorage
localStorage.setItem("token", result.data.token)
// 成功后跳转
router.push("/profile")
// 验证码登录逻辑保持原样，未来可以实现
toast({
title: "登录成功",
description: "欢迎回来！",
variant: "destructive",
title: "功能未实现",
description: "验证码登录功能尚未实现，请使用密码登录",
})
} else {
throw new Error(result.message || "登录失败")
}
} catch (error) {
toast({
@@ -155,46 +149,19 @@ export default function LoginPage() {
return
}
setIsLoading(true)
try {
// 创建FormData对象
const formData = new FormData()
formData.append("phone", form.phone)
// 发送验证码请求
const response = await fetch(`${API_BASE_URL}/auth/send-code`, {
method: "POST",
body: formData,
})
const result = await response.json()
if (result.code === 10000) {
toast({
title: "验证码已发送",
description: "请查看手机短信",
})
} else {
throw new Error(result.message || "发送失败")
}
} catch (error) {
toast({
variant: "destructive",
title: "发送失败",
description: error instanceof Error ? error.message : "请稍后重试",
})
} finally {
setIsLoading(false)
}
toast({
variant: "destructive",
title: "功能未实现",
description: "验证码发送功能尚未实现",
})
}
useEffect(() => {
// 检查是否已登录
const token = localStorage.getItem("token")
if (token) {
router.push("/profile")
// 检查是否已登录，如果已登录则跳转到首页
if (isAuthenticated) {
router.push("/")
}
}, [router])
}, [isAuthenticated, router])
return (
<div className="min-h-screen bg-white text-gray-900 flex flex-col px-4 py-8">
@@ -261,25 +228,24 @@ export default function LoginPage() {
</TabsContent>
<TabsContent value="verification" className="m-0">
<div className="flex gap-3">
<div className="relative">
<Input
type="text"
name="verificationCode"
value={form.verificationCode}
onChange={handleInputChange}
placeholder="验证码"
className="border-gray-300 text-gray-900 h-12"
className="pr-32 border-gray-300 text-gray-900 h-12"
disabled={isLoading}
/>
<Button
<button
type="button"
variant="outline"
className="w-32 h-12 border-gray-300 text-gray-600 hover:text-gray-900"
onClick={handleSendVerificationCode}
className="absolute right-3 top-1/2 -translate-y-1/2 px-4 h-8 bg-blue-50 text-blue-500 rounded text-sm font-medium"
disabled={isLoading}
>
发送验证码
</Button>
获取验证码
</button>
</div>
</TabsContent>
@@ -288,65 +254,35 @@ export default function LoginPage() {
id="terms"
checked={form.agreeToTerms}
onCheckedChange={handleCheckboxChange}
className="border-gray-300 data-[state=checked]:bg-blue-500"
disabled={isLoading}
/>
<label htmlFor="terms" className="text-sm text-gray-600">
已阅读并同意
<a href="#" className="text-blue-500 mx-1">
用户协议
</a>
与
<a href="#" className="text-blue-500 ml-1">
隐私政策
</a>
<label
htmlFor="terms"
className="text-sm text-gray-500 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
同意《存客宝用户协议》和《隐私政策》
</label>
</div>
<Button
type="submit"
className="w-full h-12 bg-blue-500 hover:bg-blue-600 text-white"
disabled={isLoading}
>
<Button type="submit" className="w-full h-12 bg-blue-500 hover:bg-blue-600" disabled={isLoading}>
{isLoading ? "登录中..." : "登录"}
</Button>
<div className="relative">
<div className="absolute inset-0 flex items-center">
<span className="w-full border-t border-gray-300"></span>
</div>
<div className="relative flex justify-center text-xs uppercase">
<span className="bg-white px-2 text-gray-500">或</span>
</div>
<div className="flex items-center space-x-2 justify-center">
<hr className="w-full border-gray-200" />
<span className="px-2 text-gray-400 text-sm whitespace-nowrap">其他登录方式</span>
<hr className="w-full border-gray-200" />
</div>
<div className="space-y-3">
<Button
type="button"
variant="outline"
className="w-full h-12 border-gray-300 text-gray-700 hover:bg-gray-50"
disabled={isLoading}
>
<WeChatIcon className="w-6 h-6 mr-2 text-[#07C160]" />
使用微信登录
</Button>
<Button
type="button"
variant="outline"
className="w-full h-12 border-gray-300 text-gray-700 hover:bg-gray-50"
disabled={isLoading}
>
<AppleIcon className="w-6 h-6 mr-2" />
使用 Apple 登录
</Button>
<div className="flex justify-center space-x-6">
<button type="button" className="p-2 text-gray-500 hover:text-gray-700">
<WeChatIcon className="h-8 w-8" />
</button>
<button type="button" className="p-2 text-gray-500 hover:text-gray-700">
<AppleIcon className="h-8 w-8" />
</button>
</div>
</form>
<div className="mt-8 text-center">
<a href="#" className="text-sm text-gray-500">
联系我们
</a>
</div>
</div>
</Tabs>
</div>