WEB 만들기 32 인증체크

아무나 진입 가능한 페이지 

Landding Page, About Page

 

로그인한 회원만 진입 가능한 페이지

Detail Page

 

로그인 한 회원은 진입 못하는 페이지

Register Page, Login Page

 

관리자만 진입 가능한 페이지

Admin Page

 

이렇게 구성됩니다. 

 

 

무튼 이러한 인증에 대한 내용입니다. 

 

HOC를 사용을 해야합니다. 

다른 컨포넌트를 받아서 새로운 컨포넌트를 리턴하는 것입니다. 

이런식으로 다른 컨포넌트를 집어넣고 새로운것을 만들어낸다. 

이곳에 페이지를 넣으면 

 

과정은 Auth(HOC)부분에서 back end로 request를 날린다. 

그리고 이때 랜딩페이지에 들어온 사람의 상태를 HOC로 가져온다. 

 

그상태로 해당 페이지에 들어와있어도 되는지 판별을하고 내보내거나 다른곳으로 보낸다.

 

우선 우리가 미리 만들어났던 hoc폴더에 auth.js 파일을 만들어봅시다. 

 

이곳에 

import Axios from 'axios';
import React,{useEffect} from 'react';
import {useDispatch} from 'react-redux';
import { auth } from '../_actions/user_action';

export default function (SpecificComponent, option, adminRoute = null){

    function AuthenticationCheck(props){

        const dispath = useDispatch();
        useEffect(()=>{
            //Axios.get('/api/users/auth') // 이런식으로 구현되지만 리덕스 기능은
            dispath
        },[])

    }

    return AuthenticationCheck
}

 

 

이렇게 해주고 나서 

user_action.js부분으로 가서 

import{
    LOGIN_USER,
    REGISTER_USER,
    AUTH_USER
}from './types';


export function auth(){

    const request = axios.get('/api/users/auth')//서버로 전송하는것

    .then(response=>response.data)

        return{
            type:AUTH_USER,
            payload:request
       }
}

AUTH_USER

추가

types.js 부분으로가서 

export const AUTH_USER = "auth_user";

추가

 

그리고

user_reducer.js 부분에 case 추가해줘야합니다.

-----------------------------------------------

import{

    LOGIN_USER,

    REGISTER_USER,

    AUTH_USER

} from '../_actions/types';

임폴트 추가

 

        case AUTH_USER:

        return {...state,userData: action.payload}// 이따 수정예정

        break;    

-----------------------------------------------

HOC 에 auth.js 

import Axios from 'axios';
import React,{useEffect} from 'react';
import {useDispatch} from 'react-redux';
import { auth } from '../_actions/user_action';

export default function (SpecificComponent, option, adminRoute = null){

    function AuthenticationCheck(props){

        const dispath = useDispatch();
        useEffect(()=>{
            //Axios.get('/api/users/auth') // 이런식으로 구현되지만 리덕스 기능은
            dispath(auth())
        },[])

    }

    return AuthenticationCheck
}

 

server / index.js 

부분에 보면

이부분을 클라이언트에 보내준다. 

그리고 나서 

hoc / auth.js부분으로가서 

 

 

일단 구현은 되었고, 안에 컴포넌트를 넣어야하는데 그것은 

app.js 부분을 보게 되면 

 

 

여기에서 auth.js 만든것을 import하면 됩니다. 

 

import Auth from './hoc/auth'

 <Switch>

          <Route exact path="/"component={Auth(LandingPage,null)}/>

          <Route exact path="/login" component={Auth(LoginPage,false)}/>

          <Route exact path="/register" component={Auth(RegisterPage,false)}/>

        </Switch>

추가

export default function (SpecificComponent, option, adminRoute = null){

 

이부분이 Auth(SpecificComponent, option, adminRoute = null)

이되는것인데 

    //option 부분

//null ==> 아무나 출입이 가능한 페이지

//true ==> 로그인한 유저만 출입이 가능한 페이지

//false ==>  로그인한 유저는 출입 불가능한 페이지

 

마지막 관리자만 접근 가능한 페이지면 마지막 매게변수에 true라고 하면됩니다. 

로그인 페이지 부분에 

랜딩페이지, 회원가입 페이지 이렇데 다 추가해주고 

import { withRouter } from 'react-router-dom';

export default withRouter()

 

 

하면됩니다.

 

로그인페이지에서

이거이고

랜딩페이지

 

확인해주시면됩니다.