728x90 반응형 WEB49 WEB 만들기 32 인증체크 아무나 진입 가능한 페이지 Landding Page, About Page 로그인한 회원만 진입 가능한 페이지 Detail Page 로그인 한 회원은 진입 못하는 페이지 Register Page, Login Page 관리자만 진입 가능한 페이지 Admin Page 이렇게 구성됩니다. 무튼 이러한 인증에 대한 내용입니다. HOC를 사용을 해야합니다. 다른 컨포넌트를 받아서 새로운 컨포넌트를 리턴하는 것입니다. 이런식으로 다른 컨포넌트를 집어넣고 새로운것을 만들어낸다. 이곳에 페이지를 넣으면 과정은 Auth(HOC)부분에서 back end로 request를 날린다. 그리고 이때 랜딩페이지에 들어온 사람의 상태를 HOC로 가져온다. 그상태로 해당 페이지에 들어와있어도 되는지 판별을하고 내보내거나 다른곳으로 보낸.. 2021. 1. 26. WEB 만들기 -31 로그아웃 랜딩 페이지에 버튼 하나 생성하면되는것인데 LandingPage로 가서 여기 아래 부분에 로그아웃 넣어주고 나서 const onClickHandler = ()=>{ axios.get('/api/user/logout') .then(response=>{ console.log(response.data) }) } 추가 로그아웃 수정 하면 끝 그리고 제대로 로그아웃이 되면 로그인 창으로 넘어갈 수 있도록 import React, { useEffect } from 'react' import axios from 'axios'; function LandingPage(props){ useEffect(() => { axios.get('/api/hello') .then(response => { console.log(resp.. 2021. 1. 25. WEB 만들기 30 회원 가입 페이지 회원가입 페이지는 간단히 이메일 이름 비밀번호 비밀번호 확인 확인 이렇게 구성해서 만들 예정 입니다. Email Password Login 로그인 페이지의 소스를 회원가입 페이지로 가져와 붙여넣어줍니다. return 아래에 넣어주시고 Email name Password ConfirmPassword Login 이렇게 몇개의 창을 생성을 해주고 이름을 바꿔주시면 됩니다. 그리고 const dispatch = useDispatch(); const [Email, setEmail]= useState("") const [Password, setPassword] =useState("") const onEmailHandler = (event)=>{ setEmail(event.currentTarget.value) } c.. 2021. 1. 25. WEB 만들기 28, 29 - 로그인 페이지 원래는 유효성 체크도 매번 해야하고 틀렸을때 그런 애니메이션 같은경우를 하는데 Formik과 Yup를 사용한다. 하지만 기본 이기 때문에 그냥 만들예정 client/ src/ compoents/ view/ LoginPage/ LoginPage.js 부분으로 들어갑니다. style={{ display: 'flex', justifyContent : 'center', alignItems : 'center' ,width: '100%', height : '100vh' }}> 이스타일을 복붙해서 쓰면되고 import React from 'react' function LoginPage(){ return( Email Password Login ) } export default LoginPage const [Email,.. 2021. 1. 24. 이전 1 2 3 4 5 6 7 ··· 13 다음 728x90 반응형
