yoonsang

<p>안녕하세요!&nbsp;</p>
<p>저도 마찬가지로 react-router-dom v6를 사용해서</p>
<p>꽤 문법이 많이 달라져서 많이 찾아보고 강의들었어요!</p>
<p>제 글 참고하시고 도움되시면 좋겠습니다.</p>
<p><strong>hoc/auth.js</strong></p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #c586c0;">import</span><span style="color: #9cdcfe;"> React</span><span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"react"</span>;</div>
<div><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;"> useDispatch</span> }<span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"react-redux"</span>;</div>
<div><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;"> authUser</span> }<span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"../_actions/user_action"</span>;</div>
<div><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;"> useNavigate</span> }<span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"react-router-dom"</span>;</div>
<br />
<div><span style="color: #c586c0;">export default</span> <span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">Auth</span>({<span style="color: #9cdcfe;"> </span><span style="color: #9cdcfe;">SpecificComponent</span>,<span style="color: #9cdcfe;"> </span><span style="color: #9cdcfe;">option</span>,<span style="color: #9cdcfe;"> </span><span style="color: #9cdcfe;">adminRoute</span> =<span style="color: #569cd6;"> null</span> }) {</div>
<div><span style="color: #569cd6;"> const</span><span style="color: #9cdcfe;"> </span><span style="color: #dcdcaa;">dispatch</span> = <span style="color: #dcdcaa;">useDispatch</span>();</div>
<div><span style="color: #569cd6;"> const</span><span style="color: #9cdcfe;"> </span><span style="color: #dcdcaa;">navigate</span> = <span style="color: #dcdcaa;">useNavigate</span>();</div>
<br />
<div><span style="color: #dcdcaa;">dispatch</span>(<span style="color: #dcdcaa;">authUser</span>()).<span style="color: #dcdcaa;">then</span>((<span style="color: #9cdcfe;">response</span>) <span style="color: #569cd6;">=></span> {</div>
<div><span style="color: #c586c0;"> if</span> (!<span style="color: #9cdcfe;">response</span>.<span style="color: #9cdcfe;">payload</span>.<span style="color: #9cdcfe;">isAuth</span>) {</div>
<div><span style="color: #6a9955;"> // 로그인 하지 않은 상태</span></div>
<div><span style="color: #c586c0;"> if</span> (<span style="color: #9cdcfe;">option</span>) {</div>
<div><span style="color: #dcdcaa;">navigate</span>(<span style="color: #ce9178;">"/login"</span>);</div>
<div>}</div>
<div>}<span style="color: #c586c0;"> else</span> {</div>
<div><span style="color: #6a9955;"> // 로그인 한 상태</span></div>
<div><span style="color: #c586c0;"> if</span> (<span style="color: #9cdcfe;">adminRoute</span> && !<span style="color: #9cdcfe;">response</span>.<span style="color: #9cdcfe;">payload</span>.<span style="color: #9cdcfe;">isAdmin</span>) {</div>
<div><span style="color: #dcdcaa;">navigate</span>(<span style="color: #ce9178;">"/"</span>);</div>
<div>}<span style="color: #c586c0;"> else</span> {</div>
<div><span style="color: #c586c0;"> if</span> (<span style="color: #9cdcfe;">option</span> ===<span style="color: #569cd6;"> false</span>) {</div>
<div><span style="color: #dcdcaa;">navigate</span>(<span style="color: #ce9178;">"/"</span>);</div>
<div>}</div>
<div>}</div>
<div>}</div>
<div>});</div>
<br />
<div><span style="color: #c586c0;"> return</span> <span style="color: #808080;"><</span><span style="color: #569cd6;">SpecificComponent</span> <span style="color: #808080;">/></span>;</div>
<div>}</div>
</div>
<p><strong>App.js</strong></p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;"> BrowserRouter</span><span style="color: #c586c0;"> as</span><span style="color: #9cdcfe;"> Router</span>,<span style="color: #9cdcfe;"> Routes</span>,<span style="color: #9cdcfe;"> Route</span> }<span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"react-router-dom"</span>;</div>
<div><span style="color: #c586c0;">import</span><span style="color: #9cdcfe;"> LandingPage</span><span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"./components/views/LandingPage/LandingPage"</span>;</div>
<div><span style="color: #c586c0;">import</span><span style="color: #9cdcfe;"> LoginPage</span><span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"./components/views/LoginPage/LoginPage"</span>;</div>
<div><span style="color: #c586c0;">import</span><span style="color: #9cdcfe;"> RegisterPage</span><span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"./components/views/RegisterPage/RegisterPage"</span>;</div>
<div><span style="color: #c586c0;">import</span><span style="color: #9cdcfe;"> Auth</span><span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"./hoc/auth"</span>;</div>
<br />
<div><span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">App</span>() {</div>
<div><span style="color: #6a9955;"> // Auth option</span></div>
<div><span style="color: #6a9955;"> // null -> 누구나 접근 가능</span></div>
<div><span style="color: #6a9955;"> // true -> 로그인 한 유저만 접근 가능</span></div>
<div><span style="color: #6a9955;"> // false -> 로그인 한 유저는 접근 불가능</span></div>
<div><span style="color: #c586c0;"> return</span> (</div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">Router</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">Routes</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">Route</span></div>
<div><span style="color: #9cdcfe;">path</span>=<span style="color: #ce9178;">"/"</span></div>
<div><span style="color: #9cdcfe;">element</span>=<span style="color: #569cd6;">{</span><span style="color: #808080;"><</span><span style="color: #569cd6;">Auth</span> <span style="color: #9cdcfe;">SpecificComponent</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">LandingPage</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">option</span>=<span style="color: #569cd6;">{null}</span> <span style="color: #808080;">/></span><span style="color: #569cd6;">}</span></div>
<div><span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">Route</span></div>
<div><span style="color: #9cdcfe;">path</span>=<span style="color: #ce9178;">"/login"</span></div>
<div><span style="color: #9cdcfe;">element</span>=<span style="color: #569cd6;">{</span><span style="color: #808080;"><</span><span style="color: #569cd6;">Auth</span> <span style="color: #9cdcfe;">SpecificComponent</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">LoginPage</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">option</span>=<span style="color: #569cd6;">{false}</span> <span style="color: #808080;">/></span><span style="color: #569cd6;">}</span></div>
<div><span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"><</span><span style="color: #569cd6;">Route</span></div>
<div><span style="color: #9cdcfe;">path</span>=<span style="color: #ce9178;">"/register"</span></div>
<div><span style="color: #9cdcfe;">element</span>=<span style="color: #569cd6;">{</span><span style="color: #808080;"><</span><span style="color: #569cd6;">Auth</span> <span style="color: #9cdcfe;">SpecificComponent</span>=<span style="color: #569cd6;">{</span><span style="color: #dcdcaa;">RegisterPage</span><span style="color: #569cd6;">}</span> <span style="color: #9cdcfe;">option</span>=<span style="color: #569cd6;">{false}</span> <span style="color: #808080;">/></span><span style="color: #569cd6;">}</span></div>
<div><span style="color: #808080;">/></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">Routes</span><span style="color: #808080;">></span></div>
<div><span style="color: #808080;"></</span><span style="color: #569cd6;">Router</span><span style="color: #808080;">></span></div>
<div>);</div>
<div>}</div>
<br />
<div><span style="color: #c586c0;">export default</span><span style="color: #9cdcfe;"> </span><span style="color: #dcdcaa;">App</span>;</div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

인증 체크 부분 app..js 부분 질문이요

<p>위 방법으로도 안되시는 분들은 여기 참고하셔도 좋을것 같아요!</p>
<p>저처럼 react-router-dom v6 사용하시는 분들은&nbsp;</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;"><span style="color: #c586c0;">import</span> {<span style="color: #9cdcfe;"> useNavigate</span> }<span style="color: #c586c0;"> from</span> <span style="color: #ce9178;">"react-router-dom"</span>;</div>
<p>LoginPage 함수 내부에서 아래 처럼 선언 해주시고</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;"><span style="color: #569cd6;">const</span><span style="color: #9cdcfe;"> </span><span style="color: #dcdcaa;">navigate</span> = <span style="color: #dcdcaa;">useNavigate</span>();</div>
<p>dispatch promise then 부분에&nbsp;</p>
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">response</span>.<span style="color: #9cdcfe;">payload</span>.<span style="color: #9cdcfe;">loginSuccess</span>) {</div>
<div><span style="color: #dcdcaa;">navigate</span>(<span style="color: #b5cea8;">-1</span>);</div>
<div>}<span style="color: #c586c0;"> else</span> { ... }</div>
</div>
<p>저는 이런 식으로 해서 해결했습니다.</p>
<p>좋은 강의 잘 듣고 있습니다~~!!</p>

yoonsang

Posts