URLから直接アクセスされたときも権限判定を行いたい

はじめに

システムをリリースした後の追加要望で、権限の追加を依頼されたときの画面制御時に実装したものです。
当時のレビューで直接アクセス時も制御するよう指摘されたので教訓として残しておこうと思います。

コード例

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import toast from 'react-toastify';
import UseAxios from 'your-axios-hook';

const MyComponent = () => {
  const router = useRouter();

  const fetchUserInfo = async () => {
    try {
      const res = await UseAxios('get', 'hoge');
      if (res && res.status === 200 && res.data) {
        const hoge = res.data.hoge;
        return hoge.is_user;
      }
    } catch (error) {
      console.error('Error fetching user info:', error);
      return false;
    }
  };

  useEffect(() => {
    const checkPermissions = async () => {
      const is_user = await fetchUserInfo();
      
      if (!is_user) {
        toast.error('アクセス権限がありません。トップページへリダイレクトします。', {
          position: 'top-right',
          autoClose: 3000,
          hideProgressBar: true,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: 'colored',
        });
        router.push('/');
      } else {
        getDatas();
      }
    };

    checkPermissions();
  }, [router]);

  return (
    <div>
    </div>
  );
};

export default MyComponent;

おわりに

直接アクセスされた際は上記のuseEffectで権限判定を行い、判定によってリダイレクト有無が発生します。
権限なくても直接アクセスなどの裏技っぽいことは他にも学んでいきたいです。（対策できるように）