[コードキャンプ5週目]権限移転

[権限分岐は?

「権限分岐」とは、その名の通り、表示画面のページを権限によって区切ることです.
ログインページが実装されている場合は、管理者権限を持つ人がどのページを表示すべきか、許可されていないページであればどのように処理すべきかを考慮する必要があります.
会員
非会員、購入者、販売者、管理者など多くの会員タイプがあり、会員ごとに見るページ権限が異なるはずです.
権限がない場合、これらの権限に基づいてページを表示および処理するプロセスが権限分岐です.
パーミッション分割を行うには、ルート値を使用してパーミッション分割を行い、ユーザーがどのような情報を持っているかを決定できます.

const withAuth = (Component) => (props) => {
  const router = useRouter();
  const { accessToken } = useRecoilState(accessTokenState);
  useEffect(() => {
    if (!accessToken) router.push("/login");
  }, []);
  if (!accessToken) return <></>;
  return <Component {...props} />;
};
export default withAuth;

権限を分離するためにuserEffectとして最初にレンダリングされたページでuserEffectを使用して分岐処理を行う場合は、他のページでもuserEffectを使用してすべてトークン値で許可する必要がありますが、withAuthというHOC(高次素子)を使用すると分岐処理が容易になります.