token 기반 mypick username set

@@ -14,7 +14,6 @@
     "axios": "^0.19.2",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
     "bootstrap": "^4.5.0",
     "http-proxy-middleware": "^1.0.4",
     "http-proxy-middleware": "^1.0.4",
-    "mdbreact": "^4.27.0",
     "react": "^16.13.1",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
     "react-app-polyfill": "^1.0.6",
     "react-cookies": "^0.1.1",
     "react-cookies": "^0.1.1",

@@ -72,13 +72,14 @@ const UserCards = (props) => {
             setDatas(result.data);       
             setDatas(result.data);       
           };
           };
           fetchData();
           fetchData();
-          setUsername(cookie.load('username'));
+          setUsername(props.username);
+          // setUsername(cookie.load('username'));
     }, [username]);
     }, [username]);
 
 
     const LogoutHandler = (e) => {
     const LogoutHandler = (e) => {
       e.preventDefault();
       e.preventDefault();
       localStorage.removeItem('user');
       localStorage.removeItem('user');
-      cookie.remove('username');
+      // cookie.remove('username');
       props.isLogin(false);
       props.isLogin(false);
       return ;
       return ;
     }
     }

@@ -3,9 +3,6 @@ import NavBar from '../components/NavBar';
 import MealCard from '../components/MealCard';
 import MealCard from '../components/MealCard';
 import { CustomInput } from 'reactstrap';
 import { CustomInput } from 'reactstrap';
 import { Container, Row, Col } from "reactstrap";
 import { Container, Row, Col } from "reactstrap";
-
-import { Card, CardText, CardBody, CardTitle, } from "reactstrap";
-
 import axios from 'axios';
 import axios from 'axios';
 import Loading from '../components/Loading';
 import Loading from '../components/Loading';
 
 
@@ -190,9 +187,6 @@ const MenuPage = (props) => {
                 </Container>)
                 </Container>)
                 : <Loading value="Loading.."/>
                 : <Loading value="Loading.."/>
                 }
                 }
-                    
-                
-                
         </>
         </>
     );
     );
 }
 }

@@ -9,6 +9,7 @@ import { Container } from 'reactstrap';
 
 
 const MypickPage = () => {
 const MypickPage = () => {
     const [isLogin, setIsLogin] = useState(false);
     const [isLogin, setIsLogin] = useState(false);
+    const [userName, setUserName] = useState('');
     const authApi = () => {
     const authApi = () => {
         const user = JSON.parse(localStorage.getItem('user'));
         const user = JSON.parse(localStorage.getItem('user'));
         return fetch('/api/auth', {
         return fetch('/api/auth', {
@@ -21,7 +22,7 @@ const MypickPage = () => {
         .then(result => {
         .then(result => {
             if(result.message === 'valid token') {
             if(result.message === 'valid token') {
                 setIsLogin(true);
                 setIsLogin(true);
-                
+                setUserName(result.username);
             } else if(result.message === 'expired token') {
             } else if(result.message === 'expired token') {
                 // alert('토큰이 만료되었습니다. 로그인 해주세요.');
                 // alert('토큰이 만료되었습니다. 로그인 해주세요.');
                 setIsLogin(false);
                 setIsLogin(false);
@@ -42,7 +43,7 @@ const MypickPage = () => {
             {
             {
             isLogin ? 
             isLogin ? 
             (<>
             (<>
-            <UserCards isLogin={setIsLogin}/>
+            <UserCards username={userName} isLogin={setIsLogin}/>
             </>) 
             </>) 
             : 
             : 
             (<>
             (<>

@@ -601,6 +601,11 @@
         "safe-buffer": "^5.0.1"
         "safe-buffer": "^5.0.1"
       }
       }
     },
     },
+    "jwt-decode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
+      "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
+    },
     "locate-path": {
     "locate-path": {
       "version": "3.0.0",
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",

@@ -21,6 +21,7 @@
     "express": "^4.17.1",
     "express": "^4.17.1",
     "iconv-lite": "^0.5.1",
     "iconv-lite": "^0.5.1",
     "jsonwebtoken": "^8.5.1",
     "jsonwebtoken": "^8.5.1",
+    "jwt-decode": "^2.2.0",
     "mysql": "^2.18.1"
     "mysql": "^2.18.1"
   }
   }
 }
 }

@@ -4,6 +4,7 @@ const fs = require("fs");
 const mysql = require("mysql");
 const mysql = require("mysql");
 const iconv = require("iconv-lite");
 const iconv = require("iconv-lite");
 const jwt = require("jsonwebtoken");
 const jwt = require("jsonwebtoken");
+const jwt_decode = require('jwt-decode');
 
 
 const bcrypt = require("bcrypt");
 const bcrypt = require("bcrypt");
 const saltRounds = 10;
 const saltRounds = 10;
@@ -144,13 +145,17 @@ app.post("/api/signin", (req, res) => {
 
 
 // ?? ???
 // ?? ???
 app.get('/api/auth', (req, res) => {
 app.get('/api/auth', (req, res) => {
-  // ?? ??
+  
+  
+  const user = jwt_decode(req.headers.authorization);
+  console.log(user.name);
   try {
   try {
     // ?? ??? ??? ??(req.headers.authorization)? ???? ???? ?? ??
     // ?? ??? ??? ??(req.headers.authorization)? ???? ???? ?? ??
     req.decoded = jwt.verify(req.headers.authorization, jwt_secret_key.value);
     req.decoded = jwt.verify(req.headers.authorization, jwt_secret_key.value);
     return res.status(200).json({
     return res.status(200).json({
       code: 200,
       code: 200,
-      message: 'valid token'
+      message: 'valid token',
+      username: user.name
     });
     });
   }
   }