从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(五) 实现登录功能

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连 谢谢！！ 下篇 咱实现导航栏和 修改个人信息