本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
react怎么实现登录和注册？
【资料图】
react简单实现登录注册逻辑（localStorage模拟实现、数据库连接并通过查询数据库实现）
1、搭建样式组件
import styled from "styled-components";export const MineContainer = styled.div` flex:1;`export const PhoneLogin =styled.div` padding:10px; input{ margin:3px; }`export const UserRegister = styled.div` padding:10px; input{ margin:3px; }`登录后复制localStorage模拟实现
2、登录注册页面的基础路由组件
import React ,{Component} from "react";import {PhoneLogin} from "./MineStyleComponent"class Login extends Component { render(){ return( 手机号：
验证码：
) }}export default Login;==========================================================================================import React ,{Component} from "react";import {UserRegister} from "./MineStyleComponent"class Register extends Component { render(){ return( 手机号：
密码：
验证码：
) }}export default Register;登录后复制3、登录注册路由的展示
import React, { Component} from "react";import {MineContainer} from "./MineStyleComponent"import Login from "./Login";import Register from "./register";import {Route} from "react-router-dom"class Mine extends Component { constructor(){ super() this.state={ loginFlag:false,//通过开关切换登录方式 } } check = ()=>{//通过编程导航进行两个路由的切换 if(this.state.loginFlag){ this.props.history.push("/mine/register") }else{ this.props.history.push("/mine/login") } this.setState({ loginFlag:!this.state.loginFlag, }) } render(){ const {loginFlag} = this.state return ( ) }}export default Mine;登录后复制4、利用本地数据存取简单实现一下逻辑过程。
本地存储一个用户写法
import React ,{Component} from "react";import {UserRegister} from "./MineStyleComponent"class Register extends Component { //本地存储一个账户的模拟登录注册写法 //逻辑：通过判断本地存储，来确定用户是否登录过，点击登陆时进行判断 LoginClick = () =>{ const username = this.users.value; const password = this.password.value; let ls_users = localStorage.getItem("users"); if(ls_users){ //如果ls_users存在证明已有用户注册,判断密码，用户名是否正确 ls_users = JSON.parse(ls_users) if(ls_users.username===username&&ls_users.password===password){ alert("登录成功") this.props.history.push("/home") }else{ alert("用户名或登录密码输入错误") } }else{ //没有用户注册，直接保存到本地存储 localStorage.setItem("users",JSON.stringify({username,password})) this.props.history.push("/home") } } render(){ return( 用户名：this.users=el} />
密码：this.password=el} />
验证码：
) }}export default Register;登录后复制localStorage中存储多个用户写法
import React ,{Component} from "react";import {UserRegister} from "./MineStyleComponent"class Register extends Component { //本地存储一个账户的模拟登录注册写法 //逻辑：通过判断本地存储，来确定用户是否登录过，点击登陆时进行判断 LoginClick = () =>{ let obj = []; const username = this.users.value; const password = this.password.value; let ls_users = localStorage.getItem("users"); if(ls_users){ //如果ls_users存在证明已有至少用户注册, obj = JSON.parse(ls_users) console.log(obj) //对本地存储数据进行便利与输入值对比 let fg = obj.some (item => { if(item.username===username) return true//用户名已存在 }) if(fg){//fg为真找到用户名，接下里对密码判断 //对存储数据遍历，比对用户名名与密码 let f=false obj.map(item => { if(item.username===username&&item.password===password){ f=true; return f; } }) if(f){//查询正确可以正常登录 alert("登录成功") this.props.history.push("/home") }else{ alert("密码错误") } }else{//没找到对将用户保存到本地，进行自动注册 obj.push({username,password}); localStorage.setItem("users",JSON.stringify(obj)) this.props.history.push("/home") } }else{ //没有用户注册，直接保存到本地存储 obj.push({username,password}) localStorage.setItem("users",JSON.stringify(obj)) this.props.history.push("/home") } } render(){ return( 用户名：this.users=el} />
密码：this.password=el} />
验证码：
) }}export default Register;登录后复制连接数据库实现登陆注册代码
1、数据库操作代码
const { userSchema } = require("./schema");const { userModel } = require ("./module");//连接数据库const connect = require ("./connect");connect.init();//数据库操作const db = { user: { add(data){//数据添加 const user = new userModel(data) user.save() }, query(){//数据库查询,通过promise异步函数将结果返回出去 return new Promise( (resolve,reject)=>{ userModel.find( {},(err,docs) => {//查询数据库所有 if(err) console.log(err) resolve(docs)//将查询结果返回出去 }) }) } }}module.exports = { user: db.user}登录后复制2、服务端路由代码(Nodejs中express搭建的服务端)
//打造用户信息接口const express = require ("express");const router = express.Router();const {user} = require ("../db");//打造restful接口，不同接口暴露不同功能人router.route("/userInfo") .post( async (req,res,next) => { const { userName, pass} = req.body const result = await user.query() //判断请求与数据库数据，在遍历前需要判断后台查询是否为空值 var f =result && result.some( item => { if( item.userName === userName ) return true }) if(f){//证明用户名存在，需要判断密码是否正确 let passFlag = result&&result.some( (item) => { if(item.userName===userName&&item.pass===pass){ return true } }); if(passFlag){//密码正确，登录成功 res.render("user",{ data:JSON.stringify({ info:"登录成功", status:2 }) }) }else{//密码错误 res.render("user",{ data:JSON.stringify({ info:"用户名已存在或用户密码错误", status:0 }) }) } }else{//用户不存在，直接存入数据库,注册 user.add({...req.body}) res.render("user",{ data:JSON.stringify({ info:"注册成功", status:1 }) }) } });module.exports = router//暴露路由接口登录后复制3、前台页面显示操作代码
import React ,{Component} from "react";import {UserRegister} from "./MineStyleComponent";import http from "../../utils/http";class Register extends Component { //本地存储一个账户的模拟登录注册写法 //逻辑：通过判断本地存储，来确定用户是否登录过，点击登陆时进行判断 async LoginClick (){ const username = this.users.value; const password = this.password.value; const params = new URLSearchParams() params.append("userName",username); params.append("pass",password) const res = await http({//调用封装好的axios数据请求方法 url:"http://localhost:3000/userInfo", method:"POST", data:params }) if( res.data.status === 0 ){ alert("用户名已经存在或是用户名密码错误") }else if ( res.data.status === 1){ alert("注册成功") }else { this.props.history.push("/home") alert("登录成功") } } render(){ return( 用户名：this.users=el} />
密码：this.password=el} />
验证码：
) }}export default Register;登录后复制以上就是react怎么实现登录和注册的详细内容，更多请关注php中文网其它相关文章！
