react如何實現(xiàn)登錄和注冊

這篇文章主要介紹了react如何實現(xiàn)登錄和注冊的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react如何實現(xiàn)登錄和注冊文章都會有所收獲，下面我們一起來看看吧。

react實現(xiàn)登錄和注冊的方法：1、搭建樣式組件；2、創(chuàng)建登錄注冊頁面的基礎路由組件，代碼如“import React,{Component} from 'react';import{PhoneLogin}from '... {render(){...}”；3、展示登錄注冊路由；4、連接數(shù)據(jù)庫實現(xiàn)登錄注冊代碼；5、通過判斷本地存儲來確定用戶是否登錄過，點擊登錄時進行判斷即可。

react簡單實現(xiàn)登錄注冊邏輯（localStorage模擬實現(xiàn)、數(shù)據(jù)庫連接并通過查詢數(shù)據(jù)庫實現(xiàn)）

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模擬實現(xiàn)

2、登錄注冊頁面的基礎路由組件

import React ,{Component} from 'react';import {PhoneLogin} from './MineStyleComponent'class Login extends Component {
   render(){
      return(
         <PhoneLogin>
            手機號：<input type="text"/><br/>
            驗證碼：<input type="password"/><br/>
            <button>登錄</button>
         </PhoneLogin>
      )
   }}export default Login;==========================================================================================import React ,{Component} from 'react';import {UserRegister} from './MineStyleComponent'class Register extends Component {
   render(){
      return(
         <UserRegister>
            手機號：<input type="text"/><br/>
            密碼：<input type= "password" /><br/>
            驗證碼：<input type="password"/><br/>
            <button>登錄</button>
         </UserRegister>
      )
   }}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 (
         <MineContainer>
           <Route path = "/mine/login" component = { Login }></Route>
           <Route path = "/mine/register" component = { Register }></Route>
           <button onClick = {this.check} > { loginFlag?'用戶名登錄':'短信驗證登錄'} </button>
         </MineContainer>
      )
   }}export default Mine;

4、利用本地數(shù)據(jù)存取簡單實現(xiàn)一下邏輯過程。

本地存儲一個用戶寫法

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(
         <UserRegister>
            用戶名：<input type="text" ref= {el=>this.users=el} /><br/>
            密碼：<input type= "password"  ref= {el=>this.password=el} /><br/>
            驗證碼：<input type="text"/><br/>
            <button onClick= {this.LoginClick} > 登錄</button>
         </UserRegister>
      )
   }}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)
         
         //對本地存儲數(shù)據(jù)進行便利與輸入值對比
         let fg = obj.some (item => {
            if(item.username===username) return true//用戶名已存在
         })

         if(fg){//fg為真找到用戶名，接下里對密碼判斷
            //對存儲數(shù)據(jù)遍歷，比對用戶名名與密碼
            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(
         <UserRegister>
            用戶名：<input type="text" ref= {el=>this.users=el} /><br/>
            密碼：<input type= "password"  ref= {el=>this.password=el} /><br/>
            驗證碼：<input type="text"/><br/>
            <button onClick= {this.LoginClick} > 登錄</button>
         </UserRegister>
      )
   }}export default Register;

連接數(shù)據(jù)庫實現(xiàn)登陸注冊代碼

1、數(shù)據(jù)庫操作代碼

const { userSchema } = require('./schema');const { userModel } = require ('./module');//連接數(shù)據(jù)庫const connect = require ('./connect');connect.init();//數(shù)據(jù)庫操作const db = {
   user: {
      add(data){//數(shù)據(jù)添加
         const user = new userModel(data)
         user.save()
      },

      query(){//數(shù)據(jù)庫查詢,通過promise異步函數(shù)將結果返回出去
         return new Promise( (resolve,reject)=>{
            userModel.find( {},(err,docs) => {//查詢數(shù)據(jù)庫所有
               if(err) console.log(err) 
               resolve(docs)//將查詢結果返回出去
            })
         })
      }

   }}module.exports = {
   user: db.user}

//打造用戶信息接口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()

      //判斷請求與數(shù)據(jù)庫數(shù)據(jù)，在遍歷前需要判斷后臺查詢是否為空值
      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{//用戶不存在，直接存入數(shù)據(jù)庫,注冊
         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數(shù)據(jù)請求方法
         url:'http://localhost:3000/userInfo',
         method:'POST',
         data:params      })
      if( res.data.status === 0 ){
         alert('用戶名已經(jīng)存在或是用戶名密碼錯誤')
       }else if ( res.data.status === 1){
         alert('注冊成功')
       }else {
         this.props.history.push('/home')
         alert('登錄成功')
       }

   }

   render(){
      return(
         <UserRegister>
            用戶名：<input type="text" ref= {el=>this.users=el} /><br/>
            密碼：<input type= "password"  ref= {el=>this.password=el} /><br/>
            驗證碼：<input type="text"/><br/>
            <button onClick= {this.LoginClick.bind(this)} > 登錄</button>
         </UserRegister>
      )
   }}export default Register;

關于“react如何實現(xiàn)登錄和注冊”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react如何實現(xiàn)登錄和注冊”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。