NextJS 14 中处理登录的正确方法是什么？

Question

我有一个提供登录路由“auth/login”的后端。登录后，我收到一个 JWT。该 JWT 包含过期时间和“userType”（例如“admin”）等内容。现在，我想使用 NextJS 14 创建一个前端仪表板，它根据“userType”将用户重定向到不同的仪表板区域。

到目前为止我所做的：

我已经设置了一个 login.tsx 作为客户端组件，它使用 fetch 从后端接收 JWT 令牌。我使用“js-cookie”包将此 JWT 令牌存储在浏览器中。这就是我陷入困境的地方，因为我想知道，首先，这是正确的方法吗？对于这种情况，我是否应该使用服务器组件？然后我是否读取“中间件”中的令牌并根据“userType”将用户重定向到他/她的区域？或者是否只有一个区域，然后我根据“用户类型”在仪表板中显示组件？

对我来说，NextJS 14 目前是一个黑洞，也许这里有人可以告诉我执行此操作的最佳方法以及原因！

非常感谢:)

Answer 1

我可以看到，使用凭证提供程序和 JWT 策略的 Next Auth 不是一个选项..？我还建议从

js-cookie

切换到 cookies-next。我做了同样的转换，这是值得的，因为

cookies-next

可以在客户端和服务器端使用。

在我看来，中间件方法会更好（在服务器上进行检查），对于通过登录页面进入服务器端也是如此。仅在必要时才应使用客户端（例如上下文）。对于重定向，您甚至可以使用自定义 url，例如

/api/post-login.ts

- 如果令牌保存在客户端的 cookie 中，您可以从那里进行重定向：

import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';
 
export async function GET(request: Request) {
  const cookieStore = cookies();
  const token = cookieStore.get('token');
  const { userType } = //decode your token here

  if(userType === "admin"){
   redirect('/admin/page')
   return;
  }

  if(userType === "normal"){
   redirect('/normal/page')
   return;
  }
}

and ofc，您可以在登录后通过使用 navigate 从客户端导航用户（如果您确实需要客户端）。 Next 的新版本有很多选项，服务器端在那里变得越来越重要。