React-4

Photo by Susan Wilkinson on Unsplash

지난시간에 만든 회원가입 페이지에서
회원가입이 완료 된 후 로그인 페이지로 넘어가도록 만들어보겠다.

react-router-dom useNavigate Hooks로 페이지 넘기기

react-router-dom에서 제공하는 useNavigate 기능으로
회원가입이 완료되면 로그인 페이지로 연결되도록 만들어보자.

• 먼저 useNavigate기능을 가져온다.
  import {Link , useNavigate } from 'react-router-dom';

• 컴포넌트 함수function RegisterPage() 안에 변수로 선언해준다.
  const navigate = useNavigate();

• 이렇게 안해도 컴포넌트함수안에 변수선언만 자동완성하면 자동으로 import문을 작성해준다.

• 서버로 부터 응답받는 코드 뒤에 useNavigate로 경로를 지정해준다.
  로그인 페이지니 /login 으로 가면된다.
  navigate("/login");

• 회원가입 페이지에서 이메일과 비밀번호 입력 후 잘 넘어가는지 확인하기

로그인 페이지 구현하기

UI는 회원가입 페이지와 유사하기 때문에 코드만 가져와서 기능위주로 구현해보겠다.

• 회원가입 페이지에서 코드 가져와서 login에 맞춰서 작성하기
• onSubmit onChange 등 충돌을 일으킬만한 변수들 일단 주석처리하기
• Link useNavigate useState 등등 임포트 필요한 것들 가져오기
• 회원가입 버튼 로그인에 맞춰 작성하기
• 이미 아이디가 있다면, 로그인하러가기 Link를 회원가입페이지로 라우팅 <Link to="register">

import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'

function LoginPage() {
    return (
        <div className="auth-wrapper">
            <section>
                <h1 className="sr-only">로그인 페이지</h1>
                <h2><span className="green">로그인</span> 하고 특별한 혜택누리기</h2>
                <p className='gray'>계정을 잊어버리셨나요? <Link to="javascript:void(0)" className="green">같이 찾으러 가요!</Link>
                </p>
                <form 
                // onSubmit={handleSubmit}
                >
                    
                    <label className="gray" for="email">
                        <input 
                        // onChange={handleEmailChange}
                         name="email" placeholder="ID를 입력해주세요" type="email" 
                        //  value={email} 
                         />
                        
                    </label>
                    
                    <label className="gray" for="email">
                        <input 
                        // onChange={handlePasswordChange}
                         placeholder="비밀번호를 입력해주세요" type="password" 
                        //  value={password} 
                         />
                        아기사자 ID는 심바, 사바나, 치타는웃고있다 서비스에 로그인할때 사용되는 Email 주소에요.
                    </label>
                    <p className='gray'>아기사자 서비스가 처음이신가요?<Link to="register" className="green"> 계정 만들러가기!</Link></p>
                    <button type="submit">VVIP 나가신다!</button>
                </form>
            </section>
        </div>
    )
}

export default LoginPage

• 리액트앱 실행시켜서 충돌없이 실행되는지 확인

• 받는 입력값이 똑같기 때문에 state 도 똑같이 지정해준다.
  const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

• input안의 onChange주석을 풀어주고
  회원가입페이지에서 onChange 가지고 오기

• submit 안의 onSubmit 주석을 풀고
  회원가입페이지에서 onSubmit가져오기

• clayful에서 고객 로그인 코드를 가져온다.

  가입과 로그인 | 클레이풀 허브

var Customer = Clayful.Customer;

var payload = {
    // userId:   'user_id',
    email:    '[email protected]',
    password: 'secure_password',
};

Customer.authenticate(payload, function(err, result) {

    if (err) {
        // Error case
        console.log(err.code);
    }

    var data = result.data;

    console.log(data);

});

• 회원가입 페이지와 마찬가지로 hnadleSubmit 안에 넣어준다.
• clayful/client-js 를 import 한다
  import Clayful from 'clayful/client-js'
• payload 에 들어갈 값을 email 과 password로 수정한다.

import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import Clayful from 'clayful/client-js'


function LoginPage() {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")

    const handleEmailChange = (e) => {
        setEmail(e.target.value);
    }

    const handlePasswordChange = (e) => {
        setPassword(e.target.value);
    }
    
    const handleSubmit = (e) => {
        e.preventDefault()

        var Customer = Clayful.Customer;

        var payload = {
            // userId:   'user_id',
            email,
            password,
        };

        Customer.authenticate(payload, function(err, result) {

            if (err) {
                // Error case
                console.log(err.code);
            }

            var data = result.data;

            console.log(data);

        });

    }

    return (
        <div className="auth-wrapper">
            <section>
                <h1 className="sr-only">로그인 페이지</h1>
                <h2><span className="green">로그인</span> 하고 특별한 혜택누리기</h2>
                <p className='gray'>계정을 잊어버리셨나요? <Link to="javascript:void(0)" className="green">같이 찾으러 가요!</Link></p>
                <form onSubmit={handleSubmit}>
                    
                    <label className="gray" for="email">
                        <input 
                        onChange={handleEmailChange} name="email" placeholder="ID를 입력해주세요" type="email" value={email} />
                        
                    </label>
                    
                    <label className="gray" for="email">
                        <input 
                        onChange={handlePasswordChange} placeholder="비밀번호를 입력해주세요" type="password" value={password} />
                        아기사자 ID는 심바, 사바나, 치타는웃고있다 서비스에 로그인할때 사용되는 Email 주소에요.
                    </label>
                    <p className='gray'>아기사자 서비스가 처음이신가요?<Link to="register" className="green"> 계정 만들러가기!</Link></p>
                    <button type="submit">VVIP 나가신다!</button>
                </form>
            </section>
        </div>
    )
}

export default LoginPage

• 저번에 회원가입할때 테스트했던 아이디와 패스워드로 로그인하고 콘솔에서 반환값 확인한다.

회원가입과 로그인 | 클레이풀 허브

로그인에 성공하는 경우 고객의 로그인을 필요로 하는 API(*ForMe 시리즈)들에 사용할 수 있는 고객 인증 토큰(token)이 반환됩니다.

{
    "customer":  "XJUMY4ZD4PKY",
    "token":     "<customer-auth-token>",
    "expiresIn": 604800
}

• **customer:** 고객의 고유 ID가 반환됩니다.
• **token:** 고객 인증 토큰이 반환됩니다.
• **expiresIn**: 인증 토큰이 몇 초 후에 만료되는지 전달됩니다.

• Customer.authenticate(payload, function(err, result)에서
  result안에 세가지 값을 받아온다.

• 토큰값으로 서버에서 클라이언트의 요청을 받아도 되는지 판단한다.

• 토큰값이 고객(Customer)의 브라우저에 저장되어있으면 요청받을 때 편하기 때문에 로컬 브라우저 저장되도록 한다.

• 개발자도구 - 애플리케이션 탭 - 로컬스토리지 -localhost:3000 에서 저장된 값을 확인할 수 있다.

• 로컬스토리지에 저장하기 (위 스크린샷의 스토리지란에 한줄씩 (key, value) 로 쓰는것과 같다)
  
  localStroage.setItem("customerUid", data.customer) 유저 정보 저장
  localStorage.setItem("accessToken", data.token) 토큰 정보 저장
• customerUid,accessToken로 키이름을 설정
• data.customer는 로그인해서 받아온 customer: "6S3JZJLAB4A6" 값이다.
• data.token도 마찬가지로 token: 값이다

• 다시 로그인을 해보고 스토리지를 확인한다.

• 아까 정해준 키와 값으로 이루어진 쌍으로 데이터가 들어가있는걸 확인 할 수 있다.

• useNavigate로 로그인 완료 후 랜딩페이지( 루트페이지 '/' )로 보내도록 설정한다.

import { routes , useNavigate } from 'react-router-dom';

...
...

function LoginPage() {
    const navigate = useNavigate();

...
...
            localStorage.setItem('accessToken',data.token)

            navigate("/")
        });

• 만약 클레이풀에서 err를 응답했을시 return을 추가해서 더이상 코드가 실행되지 못하도록 막는다.

 Customer.authenticate(payload, function(err, result) {

            if (err) {
                // Error case
                console.log(err.code);
              return
            }

            var data = result.data;
            
            console.log(data);

            localStorage.setItem('cutomerUid',data.customer)
            localStorage.setItem('accessToken',data.token)

            navigate("/")
        });

• 랜딩페이지로 넘어가는지 확인한다.