9. Spring boot + React Native + MongoDB - 로그인, 로그아웃 구현

자, 이제 로그인을 해보자

frontend

Login.js

import React, {useEffect, useState} from "react";
import {StyleSheet, Text, View, TextInput, Image, Button} from 'react-native';
import axios from "axios";


function Login({navigation}) {
    const [userId, onChangeUserId] = React.useState('');
    const [pw, onChangePw] = React.useState('');

    const baseUrl = "http://localhost:8080/";

    const handleKeyPress = e => { //비밀번호를 입력한 뒤 엔터키 누르면 로그인 진행
        if (e.key === 'Enter') {
            onPressLogin()
        }
    }
    
    const onPressLogin = () => {
        axios.post(baseUrl + "login", {
            userId: userId,
            pw: pw
        })
            .then((res) => {
                console.log("data : ", res.data)
                console.log("data : ", res.data.userId)
                if (res.data.userId === userId) {
                    navigation.navigate('Main', {
                        userId: userId,
                        pw: pw,
                    })
                } else {
                	alert("로그인 정보를 다시 확인해주세요.")
                }
            })
            .catch((err) => console.log(err))
    }

    return (
        <View style={styles.container}>
            <ul>
                {data}
            </ul>
            <Image
                source={{uri: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzEyMzBfMTA1%2FMDAxNzAzOTM0MDE4MTY5.EnQ_Al65sMhrNYFcEunuOIcZD7d_xpXnDhFYsl5k5aog.eHUbc0WA3A0QM0oVp3qLNpNXdDvXYR5I9WKOzDGjrnQg.JPEG.pooh_sk1012%2F%25B9%25D9%25C5%25C1%25C8%25AD%25B8%25E9_%25C0%25CC%25B7%25B9%25B5%25F0%25C0%25DA%25C0%25CE_%25B4%25DE%25B7%25C2_2560x1600.jpg&type=a340"}}
                style={{width: 600, height: 300, borderRadius: 30}}
            />
            <Text style={styles.title}> Calendar </Text>
            <TextInput
                placeholder='Id'
                style={styles.input}
                onChangeText={onChangeUserId}
            />
            <TextInput
                placeholder='Password'
                style={styles.input}
                onChangeText={onChangePw}
                secureTextEntry={true}
                keyboardType="numeric"
                onKeyPress={handleKeyPress}
            />
            <View style={styles.button}>
                <Button
                    color={'#e2d2c1'}
                    textStyle={{textAlign: 'center', font: 40}}
                    title={`Login`}
                    onPress={onPressLogin}
                />
            </View>
            <View style={styles.button}>
                <Button
                    color={'#e2d2c1'}
                    textStyle={{textAlign: 'center', font: 40}}
                    title={`회원가입`}
                    onPress={() => navigation.navigate('Join')}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 30,
    },
    input: {
        height: 40,
        margin: 12,
        borderWidth: 1,
        padding: 10,
    },
    button: {
        width: 170,
        height: 40,
        margin: 12,
        padding: 10,
    }
});

export default Login;

 

backend

LoginRequest.java 파일을 model/Request 폴더에 생성해주었다.

package com.calender.calenderproject_backend.model.Request;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class LoginRequest {
    String userId;
    String pw;
}

 

MemberRepository

package com.calender.calenderproject_backend.repository;

import com.calender.calenderproject_backend.model.Member;
import org.springframework.data.mongodb.repository.MongoRepository;

public interface MemberRepository extends MongoRepository<Member, String> {
	...
    
    Member findMemberByUserIdAndPw(String userId, String pw);
}

 

MemberService

...
    public Member login(String userId, String pw){
        return memberRepository.findMemberByUserIdAndPw(userId, pw);
    }
...

 

 

MemberController

....
    @PostMapping("/login")
    public ResponseEntity<?> memberLogin(@RequestBody LoginRequest request){
        System.out.println("User login: " + request.getUserId());
        return ResponseEntity.ok(memberService.login(request.getUserId(), request.getPw()));
    }
.....

 

 

이제 세션 유지와 로그아웃을 추가해야하는데... 

큰일났다...

컴퓨터가 너무 오래된 아이라.... 자꾸 멈춘다... 앞으로 어떡하지...?

 

 

 

 

 

 

 

 

* 몽고 디비 쿼리 참고

https://steemit.com/kr-dev/@kormanocorp/spring-boot-mongodb-query