[인증] React,apollo-express 페이지 접근제한

seokki kwon·2022년 9월 14일
0
post-thumbnail

처음에 고차컴포넌트 방식을 사용하여 시도했지만
리렌더링 문제, 고차컴포넌트에 대한 이해부족 등등으로
라이브러리를 사용하여 미들웨어를 구성하여 페이지 접근을 하기로함.

요구사항

  • 동시접속 제한
  • 인증된 사용자만 페이지접근 가능

흐름

  • 페이지접근
  • hook에서 인증url로 토큰을 담아서 get 요청으로 보냄
  • server 에서 DB의 user 토큰값과 headers 에 담긴토큰값 비교
  • message 와 token 유효성이 담긴 Boolean 형태의 데이터를 객체로 반환
  • useAuth는 return 된 프로미스함수를 middleware로 넘김
  • middleware 는 토큰값과 이동된 url에 알맞게 처리

코드

hook

import axios from "axios";
import { useEffect, useState } from "react";
function useAuth() {
  const token = localStorage.getItem("TOKEN");
  const username = localStorage.getItem("USER");

  const fetchData = async () => {
    const tokenValidity = await axios({
      method: "get",
      url: "인증요청 url",
      responseType: "type",
      headers: {
        Authorization: token,
        name: username,
      },
    })
      .then((res) => {
        return res.data.success;
      })
      .catch((err) => {
        console.log(err);
      });
    return tokenValidity;
  };

  useEffect(() => {}, []);

  const tokenValidity = fetchData();

  return { data: tokenValidity };
}

export default useAuth;

해당 hook에서 return 된 값은 미들웨어로 넘어간다
변수나 state에 담아서 별도로 보내주고 싶었지만
값을 먼저 return 해버리는 바람에 프로미스객체 자체를 넘겨준다.

middleware

export default async function authGuard(to, from, next, { injectedValue }) {
  const res = await injectedValue.data;

  if (!localStorage.getItem("TOKEN") || !localStorage.getItem("USER"))
    next("/login");
  else if (res) {
    // 로그인 상태에서 로그인페이지 접근제한
    if (to.location.pathname === "/Login") {
      next("/");
    }
    console.log("브라우저 토큰과 DB상의 유저토큰이 일치 => 페이지접근");
    next();
  } else if (!res) {
    next("/LoginErr");
    console.log("브브라우저 토큰과 DB상의 유저토큰이 불일치 => 리젝");
  }
}

미들웨어 라는것이 이런것일까
이게 맞는 방법인가 문제점은 없는가 의문이든다
시간이나면 꼭 피드백을 받고싶다.

profile
웹 & 앱개발 기록

0개의 댓글