从零开始用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 (
    

       {/*left side*/}
        

            

                {/* logo */}
                

                    

                        

                            
                        
                        
欢迎回来
                        
登录账户
                    
                
                {/* form */}
                

                    
                    

                        
                            邮箱
                        
                        {/* 输入框 */}
                        

                            

                                
                            
                             setFormData({...formData,email:e.target.value})}
                            >

                            
                        
                    

                    

                        
                            密码
                        
                        {/* 输入框 */}
                        

                            

                                
                            
                             setFormData({...formData,password:e.target.value})}
                            >
                            
                            
                             setShowPassword(!showPassword)}
                            >
                                {showPassword ? () : ()}
                            
                        
                    

                    

                        {isLogging ? (
                            <>
                                
                                Loading...
                            
                        ):(
                            "登录"
                        )}
                    
                

                

                    

                        没有账号?{""}
                        去注册
                    
                
            
        

        {/* right side */}
       
    
  )
}

export default LoginPage

这时我们的前端页面就有了

 

2.测试

输入我们注册号的账号 登录 提示登录成功！

3.页面完善

 现在我们登录和注册右侧缺一部分 我们补充上

在web下 新建components文件夹 再创建AuthImagePattern.jsx

const AuthImagePattern = ({title, subTitle}) => {
    return (
      

         

          

              {[...Array(9)].map((_,i)=>(
                  

                  
              ))}
          
          
{title}
          
{subTitle}
         
      
    )
  }
  export default AuthImagePattern

然后在singUpPage 和 LoginPage  引入即可

import AuthImagePattern from "@/components/AuthImagePattern" 在right side使用

 {/* right side */}

       

效果如图

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