Next.js 面接の習得: 重要な質問 (パート 7)

module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
};

69. Next.js で JWT を使用したユーザー認証をどのように処理できますか?

Next.js で JWT (JSON Web Token) を使用したユーザー認証を処理するには、通常、次の手順に従います。

1. JWT を保存: ログイン後、JWT を Cookie または localStorage に保存します。
   • Cookie はリクエストごとに自動的に送信されるため、トークンを保存するための推奨される方法です。

2. HTTP ヘッダーに JWT を設定します: API リクエストの場合、Authorization ヘッダーで JWT を送信します。
   

   const response = await fetch('/api/protected', {
     headers: {
       'Authorization': `Bearer ${token}`,
     },
   });
   
   

   ログイン後にコピー

3. サーバー上の JWT を確認します: API ルートまたはミドルウェアで、保護されたリソースにアクセスする前に JWT を確認します。
   

   import jwt from 'jsonwebtoken';
   
   export async function handler(req, res) {
     const token = req.headers.authorization?.split(' ')[1];
     if (!token) return res.status(401).json({ message: 'Unauthorized' });
   
     try {
       const decoded = jwt.verify(token, process.env.JWT_SECRET);
       req.user = decoded; // Attach the decoded user to the request
       next();
     } catch (err) {
       return res.status(401).json({ message: 'Invalid token' });
     }
   }
   
   

   ログイン後にコピー

4. 永続的なログインに Cookie を使用する: JWT で HTTP のみの Cookie を設定できるため、セッション間でユーザーの認証が維持されます。

70. Next.js で承認をどのように処理できますか?

Next.js での承認には、通常、認証が成功した後のユーザーのロールまたは権限レベルのチェックが含まれます。以下にいくつかのアプローチを示します:

1. ロールベースの承認: ユーザーがログインしたら、そのロールを JWT に保存し、ユーザーが保護されたルートにアクセスしようとしたときにチェックします。
   

   export async function handler(req, res) {
     const token = req.cookies.token;
     if (!token) return res.status(403).json({ message: 'Forbidden' });
   
     const decoded = jwt.verify(token, process.env.JWT_SECRET);
     if (decoded.role !== 'admin') {
       return res.status(403).json({ message: 'Forbidden' });
     }
     // Proceed with handling the request
   }
   
   

   ログイン後にコピー

2. カスタム認可ミドルウェア: カスタム ミドルウェアを作成して、特定のページまたは API ルートを提供する前にユーザーが必要な権限を持っているかどうかを確認できます。

3. 未承認ユーザーをリダイレクト: SSR または SSG ページの場合、getServerSideProps を使用してユーザーが承認されているかどうかを確認し、承認されていない場合はリダイレクトできます。
   

   export async function getServerSideProps(context) {
     const token = context.req.cookies.token;
     if (!token) {
       return { redirect: { destination: '/login', permanent: false } };
     }
     return { props: {} };
   }
   
   

   ログイン後にコピー