페이지 접근, 데이터접근 제한

인증컴포넌트로 페이지 접근제한

인증이 필요한 컴포넌트를 인증처리를 하는 컴포넌트에 인자로 넣어줘서
인증이되면 컴포넌트를 반환하는 방식

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { verifyToken } from '../../apollo';
export default function (Component) {

  function AuthenticationCheck(props) {
    const [isTokenExact, setIsTokenExact] = useState(false);
    const navigate = useNavigate();
    const clientToken = verifyToken(); // apolloClient로 부터 토큰값을 가져옴
   
    useEffect(()=>{
        console.log('useEffect');
        if(!isTokenExact) { // 현재유저와 토큰값이 일치하지 않을떄
            navigate('/Login');
        }
        else {
            // 로그인상태에서 접근제한시 restict
            if(props.restrict) {
                navigate('/');
            }
        }
    },[])
    return <Component {...props}/>;
  }
  return AuthenticationCheck;
}

인증에 관련된 로직을 useEffect 부분에 작성을 하면
한컴포넌트에서 인증을 담당할 수 있다

 <Route
 exact
 path='/Login'
 element={<AuthLogin restrict/>}
            />

로그인상태에서 접근제한 컴포넌트도 지정이 가능하다

graphQL 데이터 접근제한

https://velog.io/@shin0805/Type-GraphQL-middleware

apollo middleWare

https://www.apollographql.com/docs/apollo-server/v2/integrations/middleware/