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連 謝謝！！ 下篇 咱實現導航欄和 修改個人信息?
