localStorage를 추가하여 token&slug 사용, header의 토큰 값에 따른 api요청 분할

hoyyChoi · hoyyChoi · commit 105e08f09e49 · 2022-09-15T17:16:45.000+09:00
diff --git a/src/App.jsx b/src/App.jsx
@@ -10,11 +10,29 @@ import Newarticle from './component/Newarticle';
 import Profile from './component/Profile';
 import ArticleDetail from './component/Article/ArticleDetail';
 import {useRecoilState} from 'recoil'
-import {authState} from './atoms/auth'
+import {authState,userState} from './atoms/auth'
+import { useEffect } from 'react';
+import { getLoginUser } from './remote/index';
 
 function App() {
 
   const [auth,setAuth] = useRecoilState(authState)
+  const [user,setUserState] = useRecoilState(userState)
+
+  useEffect(()=>{
+    if(localStorage.getItem('token')){
+      getLoginUser()
+      .then(res=>{
+        setUserState(res.data.user)
+        setAuth(true)
+      }).catch(err=>{
+        console.log(err)
+      })
+      
+    }else{
+      setAuth(false)
+    }
+  },[])
   
   return (
     <div>
diff --git a/src/component/Article/ArticleDetail.jsx b/src/component/Article/ArticleDetail.jsx
@@ -11,9 +11,10 @@ const ArticleDetail = () => {
 
   const slug = useRecoilValue(slugState)
   const [data,setArticleData]=useState()
+  
 
   useEffect(()=>{
-    getSlugArticle(slug)
+    getSlugArticle(localStorage.getItem('slug'))
     .then(res=>{
       setArticleData(res.data.article)
     })
diff --git a/src/component/ArticleList.jsx b/src/component/ArticleList.jsx
@@ -9,6 +9,7 @@ const ArticleList = ({data}) => {
   const navigate = useNavigate()
   const [slug,setSlug] = useRecoilState(slugState)
   const spaceArticle = () =>{
+    localStorage.setItem('slug',data.slug)
     setSlug(data.slug)
     navigate('/b')
   }
diff --git a/src/component/Home.jsx b/src/component/Home.jsx
@@ -4,21 +4,30 @@ import Populartags from './Populartags'
 import { useRecoilValue } from 'recoil'
 import { authState, userState } from '../atoms/auth'
 import { useEffect,useState } from 'react'
-import { getArticles } from '../remote/index'
+import { getGlobalArticles,getGlobalLoginArticles } from '../remote/index'
 
 const Home = () => {
     let [articleData,setArticleData] = useState([])
     const auth = useRecoilValue(authState)
     const user = useRecoilValue(userState)
     
     useEffect(()=>{
-        getArticles({user})
+        auth?(getGlobalLoginArticles()
         .then(res=>{
             setArticleData(res.data.articles)
         }).catch(err=>{
             console.log(err)
-        })
-    },[])
+        })):
+        (getGlobalArticles()
+        .then(res=>{
+            setArticleData(res.data.articles)
+        }).catch(err=>{
+            console.log(err)
+        }))
+
+    },[auth])
+
+
     const tag = []
     for(let i=0; i<articleData.length; i++){
         for(let k=0; k<articleData[i].tagList.length; k++){
diff --git a/src/component/Profile.jsx b/src/component/Profile.jsx
@@ -1,8 +1,7 @@
 import React, { useEffect,useState } from 'react'
 import { useRecoilState,useRecoilValue } from 'recoil'
-import { profileState,userState } from '../atoms/auth'
-import { getProfile } from '../remote'
-import { getArticles } from '../remote/index'
+import { authState, profileState,userState } from '../atoms/auth'
+import { getArticles,getLoginArticles } from '../remote/index'
 import ArticleList from './ArticleList'
 
 
@@ -11,14 +10,23 @@ const Profile = () => {
     const profile = useRecoilValue(profileState)
     const user = useRecoilValue(userState)
     let [articleData,setArticleData] = useState([])
+    const auth = useRecoilValue(authState)
     
     useEffect(()=>{
-       getArticles(profile.username,{user})
+       auth?(getLoginArticles(profile.username)
        .then(res=>{
         setArticleData(res.data.articles)
         
        }).catch(err=>
-        console.log(err))
+        console.log(err)))
+        :
+        (getArticles(profile.username)
+        .then(res=>{
+         setArticleData(res.data.articles)
+         
+        }).catch(err=>
+         console.log(err)))
+        
        
        
         // get을 호출 파라미터로 들어가는게 위에서는 user(나자신이름), or 상대방 이미지 눌렀을때 이름을 전달하는것, api주소
diff --git a/src/component/Settings.jsx b/src/component/Settings.jsx
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
 import { getLoginUser } from '../remote'
 import { useRecoilState,useSetRecoilState } from 'recoil'
-import { authState, userState } from '../atoms/auth'
+import { authState, userState, profileState } from '../atoms/auth'
 import { useRecoilValue } from 'recoil'
 import { putLoginUser } from '../remote'
 
@@ -14,6 +14,7 @@ const Settings = () => {
     
     const [user,setUser]= useRecoilState(userState)
     const setAuth = useSetRecoilState(authState)
+    const [profile,setProfile] = useRecoilState(profileState)
 
     const [username1,setUsername]=useState(user.username)
     const [useremail,setUserEmail] = useState(user.email)
@@ -22,6 +23,7 @@ const Settings = () => {
 
 
     const logOut = () =>{
+        localStorage.removeItem('token')
         setAuth(false)
         navigate("/")
     }
@@ -34,10 +36,11 @@ const Settings = () => {
         // console.log(user)
 
         putLoginUser({...user,username:username1,email:useremail,bio:biotext})
-        .then(res=>
+        .then(res=>{
             setUser(res.data.user)
-        
-            
+            setProfile(res.data.user)
+            navigate("/a")
+        }
         ).catch(err=>
             console.log(err)
         )
diff --git a/src/component/Signin.jsx b/src/component/Signin.jsx
@@ -5,6 +5,7 @@ import { postLoginUser } from '../remote'
 import { authState,userState } from '../atoms/auth'
 import { useRecoilState,useSetRecoilState } from 'recoil'
 
+
 const Signin = () => {
 
     let navigate = useNavigate()
@@ -21,10 +22,11 @@ const Signin = () => {
     
     const handleSubmit = (e)=>{
         e.preventDefault()
-
+        
         postLoginUser({email,password})
         .then((res)=>{
             setUserState(res.data.user)
+            localStorage.setItem("token",res.data.user.token)
             setAuth(true)
             navigate('/')
         }
diff --git a/src/component/Signup.jsx b/src/component/Signup.jsx
@@ -22,6 +22,7 @@ const Signup = () => {
         postRegisterUser({username,email,password})
         .then(res=>{
             setUserState(res.data.user)
+            localStorage.setItem("token",res.data.user.token)
             setAuth(true)
             navigate('/')
            
diff --git a/src/remote/index.jsx b/src/remote/index.jsx
@@ -50,7 +50,7 @@ const postRegisterUser=(user)=>conduitAxios.post('/users',{user});
     image: string
   }}}
    */
-  const getLoginUser=()=>conduitAxios.get('/user');
+  const getLoginUser=()=>conduitAxios.get('/user',{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}});
   
   
 /**
@@ -92,7 +92,93 @@ const postRegisterUser=(user)=>conduitAxios.post('/users',{user});
 
   //Article
 
+   /**
+   @returns {{articles: [
+    {
+      slug: string;
+  title: string;
+  description: string;
+  body: string;
+  tagList: [
+    string
+  ];
+  createdAt: 2022-09-11T06:38:57.899Z;
+  updatedAt: 2022-09-11T06:38:57.899Z;
+  favorited: true;
+  favoritesCount: 0;
+  author: {
+    username: string;
+    bio: string;
+    image: string;
+    following: true;
+      }
+    }
+  ],
+  articlesCount: 0;
+}}
+   */
+
+const getGlobalArticles = () => conduitAxios.get('/articles?limit=30&offset=0')
+
+
   /**
+   @returns {{articles: [
+    {
+      slug: string;
+  title: string;
+  description: string;
+  body: string;
+  tagList: [
+    string
+  ];
+  createdAt: 2022-09-11T06:38:57.899Z;
+  updatedAt: 2022-09-11T06:38:57.899Z;
+  favorited: true;
+  favoritesCount: 0;
+  author: {
+    username: string;
+    bio: string;
+    image: string;
+    following: true;
+      }
+    }
+  ],
+  articlesCount: 0;
+}}
+   */
+
+const getGlobalLoginArticles = () => conduitAxios.get(`/articles?limit=30&offset=0`,{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
+
+/**
+   @param {string} author
+   @returns {{articles: [
+    {
+      slug: string;
+  title: string;
+  description: string;
+  body: string;
+  tagList: [
+    string
+  ];
+  createdAt: 2022-09-11T06:38:57.899Z;
+  updatedAt: 2022-09-11T06:38:57.899Z;
+  favorited: true;
+  favoritesCount: 0;
+  author: {
+    username: string;
+    bio: string;
+    image: string;
+    following: true;
+      }
+    }
+  ],
+  articlesCount: 0;
+}}
+   */
+
+const getArticles = (author) => conduitAxios.get(`/articles?author=${author}&limit=30&offset=0`)
+
+/**
    @param {string} author
    @returns {{articles: [
     {
@@ -119,7 +205,7 @@ const postRegisterUser=(user)=>conduitAxios.post('/users',{user});
 }}
    */
 
-const getArticles = ({user}) => conduitAxios.get(`/articles?limit=30&offset=0`,{headers:{authorization:`Bearer ${user.token}`}})
+const getLoginArticles = (author) => conduitAxios.get(`/articles?author=${author}&limit=30&offset=0`,{headers:{authorization:`Bearer ${localStorage.getItem('token')}`}})
 
 /**
  @param {{article: {
@@ -232,4 +318,4 @@ const getComment = (slug) => conduitAxios.get(`/articles/${slug}/comments`)
 
 const postComment =(slug,comment,{user}) => conduitAxios.post(`/articles/${slug}/comments`,{comment},{headers:{authorization:`Bearer ${user.token}`}})
 
-  export {postRegisterUser,postLoginUser,getLoginUser,putLoginUser,getProfile,getArticles,createArticle,getSlugArticle,getComment,postComment};
+  export {postRegisterUser,postLoginUser,getLoginUser,putLoginUser,getProfile,getGlobalLoginArticles,getGlobalArticles,getArticles,getLoginArticles,createArticle,getSlugArticle,getComment,postComment};

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ const ArticleList = ({data}) => {`
`9`	`9`	`const navigate = useNavigate()`
`10`	`10`	`const [slug,setSlug] = useRecoilState(slugState)`
`11`	`11`	`const spaceArticle = () =>{`
	`12`	`+ localStorage.setItem('slug',data.slug)`
`12`	`13`	`setSlug(data.slug)`
`13`	`14`	`navigate('/b')`
`14`	`15`	`}`