1.登录页面
完善登录页面 和注册差不多 直接copy signUpPage 内容 再稍微修改下
import { useState } from "react";
import { useAuthStore } from "../store/useAuthStore";
import { MessageSquare,Mail,Lock,Eye, EyeOff,Loader2} from "lucide-react";
import {Link} from "react-router-dom"const LoginPage = () => {const [showPassword, setShowPassword] = useState(false)const[formData,setFormData] = useState({email:"",password:""})const {login,isLogging} = useAuthStore()const handleSubmit = async (e) => {e.preventDefault()await login(formData)}return (<div className="min-h-screen grid lg:grid-cols-2">{/*left side*/}<div className="flex flex-col justify-center items-center p-6 sm:p-12"><div className="w-full mt-10">{/* logo */}<div className="text-center mb-8"><div className="flex flex-col items-center gap-2 group"><div className="size-12 rounded-xl bg-primary/10 flex items-center justify-centergroup-hover:bg-primary/20 transition-colors"><MessageSquare className="size-6 text-primary"></MessageSquare></div><h1 className="text-2xl font-bold mt-2">欢迎回来</h1><p className="text-base-content/60">登录账户</p></div></div>{/* form */}<form onSubmit={handleSubmit} className="space-y-6"><div className="form-control"><label className="label"><span className="label-text font-medium">邮箱</span></label>{/* 输入框 */}<div className="relative"><div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><Mail className="size-5 text-base-content/40" /></div><input type="text"className={`input input-bordered w-full pl-10`}placeholder="请输入邮箱地址"value={formData.email}onChange={(e)=> setFormData({...formData,email:e.target.value})}></input></div></div><div className="form-control"><label className="label"><span className="label-text font-medium">密码</span></label>{/* 输入框 */}<div className="relative"><div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><Lock className="size-5 text-base-content/40" /></div><input type={showPassword ? "text" : "password"}className={`input input-bordered w-full pl-10`}placeholder="请输入密码"value={formData.password}onChange={(e)=> setFormData({...formData,password:e.target.value})}></input><buttontype="button"className="absolute inset-y-0 right-0 pr-3 flex items-center"onClick={()=> setShowPassword(!showPassword)}>{showPassword ? (<EyeOff className="size-5 text-base-content/40" />) : (<Eye className="size-5 text-base-content/40" />)}</button></div></div><button type="submit"className="btn btn-primary w-full"disabled={isLogging}>{isLogging ? (<><Loader2 className="size-5 animate-spin"/>Loading...</>):("登录")}</button></form><div className="text-center"><p className="text-base-content/60">没有账号?{""}<Link to="/signup" className="link link-primary">去注册</Link></p></div></div></div>{/* right side */}</div>)
}export default LoginPage
这时我们的前端页面就有了
2.测试
输入我们注册号的账号 登录 提示登录成功！
3.页面完善
现在我们登录和注册右侧缺一部分 我们补充上
在web下 新建components文件夹 再创建AuthImagePattern.jsx
const AuthImagePattern = ({title, subTitle}) => {return (<div className="hidden lg:flex items-center justify-center bg-base-200 p-12"><div className="max-w-md text-center mt-10"><div className="grid grid-cols-3 gap-3 mb-8">{[...Array(9)].map((_,i)=>(<div key={i}className={`aspect-square rounded-2xl bg-primary/10 ${i%2===0?"animate-pulse":""}`}></div>))}</div><h2 className="text-2xl font-bold mb-4">{title}</h2><p className="text-base-content/40">{subTitle}</p></div></div>)}export default AuthImagePattern然后在singUpPage 和 LoginPage 引入即可
import AuthImagePattern from "@/components/AuthImagePattern" 在right side使用
{/* right side */}
<AuthImagePattern title="加入我们" subTitle="发现新朋友，分享瞬间，享受乐趣，与你最心爱的人们保持联系。"/>
效果如图
4.认证优化
问题思考 当我们用户已经登录了 登录token没有过期 这时候我们应该让用户跳到首页 如果token过期了 就重定向到login 页面 这时获取用户信息之前就需要进行用户是否登录的验证 使用中间件来实现此功能
回到后端server 新建文件夹middleware 新建auth.middleware.js
在auth.route.js 中新增一个路由
// 身份验证
router.get('/check', protectRoute, checkAuth)
在auth.controller.js中 增加 checkAuth 方法 获取返回的用户信息
// 获取登录信息
export const checkAuth = (req,res) => {
try {
res.status(200).json(req.user)
} catch (err) {
res.status(500).json({ message: '内部服务器错误' })
}
}
useAuthStore.js 补充
isCheckingAuth: false, // 是否在获取用户信息中状态
// 获取用户信息方法
checkAuth: async() => {
// 获取当前用户信息
try {
const res = await axiosInstance.get('/auth/check')
set({authUser: res.data})
// 刷新页面 判断是否登录
get().connectSocket()
} catch (error) {
console.log("useAuthStore checkAuth error",error.message)
set({authUser: null})
} finally {
set({isCheckingAuth: false})
}
},
修改App.jsx
验证结果 如图checkAuth接口 获取到了用户信息跳转到了 homePage
ok 这篇 就这样把 有问题欢迎评论留言！！喜欢的来个3连 谢谢！！ 下篇 咱实现导航栏和 修改个人信息
