211112 TIL (Troubleshooting)
今日やったこと&学んだこと
まず、今週担当した機能が完成しました.
何か困ったことがあったら、その解決過程をまとめる必要があります.
電子メール、重複ニックネームの確認
const debounceEmail = _.debounce((e) => {
setUserInfo({ ...userInfo, email: e.target.value });
}, 500);
const debounceNick = _.debounce((e) => {
setUserInfo({ ...userInfo, nickname: e.target.value });
}, 500);
ログインユーザーと未ログインユーザーの区別const isLogin = useSelector((state) => state.user.isLogin);
React.useEffect(() => {
dispatch(loginCheck());
if (isLogin) {
window.alert("로그인중입니다!메인화면으로 이동할게요. ");
history.push("/main");
}
}, [isLogin]);
設定したユーザーがログインするページにログインすると自動的にログインページに入ります.
//PublicRoute
import React from "react";
import { Route, Redirect } from "react-router-dom";
// 로그인 안했을때 접근 할 수 있는 컴포넌트
const PublickRoute = ({ component: Component, ...rest }) => {
// 로컬 스토리지 토큰 확인
const isToken = localStorage.getItem("USER_TOKEN") ? true : false;
return (
<Route
{...rest}
render={(props) =>
isToken ? <Redirect to="/main" /> : <Component {...props} />
}
/>
);
};
export default PublickRoute;
//PrivateRoute
import React from "react";
import { Route, Redirect } from "react-router-dom";
// 반드시 로그인을 해야만 접근 할 수 있는 컴포넌트
const PrivateRoute = ({ component: Component, ...rest }) => {
// 로컬 스토리지 토큰 확인
const isToken = localStorage.getItem("USER_TOKEN") ? true : false;
return (
<Route
{...rest}
render={(props) =>
isToken ? <Component {...props} /> : <Redirect to="/login" />
}
/>
);
};
export default PrivateRoute;
1.スイッチの最後に配置するNotFoundページを作成します.この構成部品のために動作しないようなデータムナビゲーション構成部品があります.さらにデータムナビゲーションを細分化するか、例外処理を行うかのいずれかであるが、中間発表であるため一時的に保留している.
</PrivateRoute>
</Switch>
<Redirect from="*" to="/" />
明日やること
今日の名言
心配は明日の悲しみを奪うことはなく、今日の楽しみを弱めるだけだ.
Reference
この問題について(211112 TIL (Troubleshooting)), 我々は、より多くの情報をここで見つけました https://velog.io/@tjdlas2412/211112-TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol