Next.js 面试掌握：基本问题（第 7 部分）

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

69. 如何在 Next.js 中使用 JWT 处理用户身份验证？

要在 Next.js 中使用 JWT（JSON Web 令牌）处理用户身份验证，通常需要执行以下步骤：

1. 存储JWT：登录后，将JWT存储在cookie或localStorage中。
   • Cookie 是存储令牌的首选方法，因为它们会随每个请求自动发送。

2. 在 HTTP 标头中设置 JWT：对于 API 请求，在授权标头中发送 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: {} };
   }
   
   

   登录后复制