[myCart] App에서 토큰 정보로 유저 관리/ 네브바 메뉴를 로그인 상태에 따라서 다르게 보여주기/로그아웃

현재 로그인 / 회원가입 토큰은 로컬스토리지에 저장되어있다. 

 

App.jsx에서 토큰을 가져와서 useState로 관리하면됨

 

import { useState } from "react";

import "./App.css";

import Navbar from "./components/Navbar/Navbar";

import Routing from "./components/Routing/Routing";

function App() {

  const [user, setUser] = useState(null);

  //실행 시 로컬 스토리지에서 토큰 가져온다

  useEffect(() => {

    const jwt = localStorage.getItem("token");

  }, []);

  return (

    <div className="app">

      <Navbar />

      <main>

        <Routing />

      </main>

    </div>

  );

}

export default App;

 

 

그리고 암호화 되어있는 토큰을 풀기 위해서 

npm i jwt-decode를 설치한다. 

 

 

import { jwtDecode } from "jwt-decode";

function App() {

  const [user, setUser] = useState(null);

  //실행 시 로컬 스토리지에서 토큰 가져온다

  useEffect(() => {

    const jwt = localStorage.getItem("token");//로컬스토리지에서 토큰가져옴

    const jwtUser = jwtDecode(jwt);//jwtDecode를 사용해서 가져온 토큰을 푼다.

    console.log(jwtUser);//유저 정보를 콘솔에 출력한다.

  }, []);

 

 

콘솔을 확인해봤다. 

유저 정보가 콘솔로 출력됨을 확인 가능했다. 

 

그리고 토큰이 없을 경우를 대비해서 try catch문으로 에러를 처리한다. 

 

  //실행 시 로컬 스토리지에서 토큰 가져온다

  useEffect(() => {

    try {

      const jwt = localStorage.getItem("token"); //로컬스토리지에서 토큰가져옴

      const jwtUser = jwtDecode(jwt); //jwtDecode를 사용해서 가져온 토큰을 푼다.

      console.log(jwtUser); //유저 정보를 콘솔에 출력한다.

    } catch (error) {}

  }, []);

 

 

 

시큐리티 문제로 jwt 토큰의 유효가능 시간이 설정되어 있다.

여기서는 1시간인데 실제서비스에서는 더 짧게 잡을 수 있다.

유효기간이 지난 토큰의 정보는 삭제하자.

 

  //실행 시 로컬 스토리지에서 토큰 가져온다

  useEffect(() => {

    try {

      const jwt = localStorage.getItem("token"); //로컬스토리지에서 토큰가져옴

      const jwtUser = jwtDecode(jwt); //jwtDecode를 사용해서 가져온 토큰을 푼다.

      //console.log(jwtUser); //유저 정보를 콘솔에 출력한다.

      if (Date.now() >= jwtUser.exp * 1000) {

        localStorage.removeItem("token"); //먄약 유효기간 지나면 삭제

        location.reload();

      } else {

        setUser(jwtUser); // 유저 정보 User에 저장

      }

    } catch (error) {}

  }, []);

 

 

 

그리고 유저 정보는 Navbar에 보낸다. 

  return (

    <div className="app">

      <Navbar user={user} />

 

 

유저가 있으면 내주문/로그아웃 /장바구니 출력 

없으면 로그인/가입 출력

const Navbar = ({ user }) => {

      <div className="align_center navbar_links">

        <LinkWithIcon title="홈페이지" link="." emoji={rocket} />

        <LinkWithIcon title="상품들" link="/products" emoji={star} />

        {!user && (

          <>

            <LinkWithIcon title="로그인" link="/login" emoji={idButton} />

            <LinkWithIcon title="가입" link="/signup" emoji={memo} />

          </>

        )}

        {user && (

          <>

            <LinkWithIcon title="내주문" link="/myorders" emoji={order} />

            <LinkWithIcon title="로그아웃" link="/logout" emoji={lock} />

            <NavLink to="/cart" className="align_center">

              장바구니 <p className="align_center cart_counts">0</p>

            </NavLink>

          </>

        )}

      </div>

 

유저 정보 있을 경우 

 

유저 정보 없을 경우 

 

 

 

로그아웃

const Logout = () => {

  localStorage.removeItem("token");

  window.location = "/";

  return null;

};

export default Logout;

 

 

라우팅에 로그아웃 추가

const Routing = () => {

  return (

    <Routes>

      <Route path="/" element={<HomePage />} />

      <Route path="/products" element={<ProductsPage />} />

      <Route path="/product/:id" element={<SingleProductPage />} />

      <Route path="/signup" element={<SignupPage />} />

      <Route path="/login" element={<LoginPage />} />

      <Route path="/cart" element={<CartPage />} />

      <Route path="/myorders" element={<MyOrderPage />} />

      <Route path="/logout" element={<Logout />} />

    </Routes>

  );

};