验证jwt token / Protected Routes NextJS NestJS和JWT

s1ag04yj  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(109)

我开始创建一个应用程序,但我想不出一些东西。我在Nest.js上创建了后端,在Next.js上创建了前端。身份验证是在后端创建的,并且工作正常。我在前端做了一些事情,以保护只有登录用户才能看到的路由。它正在工作,但如果我在浏览器cookie中设置了一个假令牌,我可以在不登录的情况下访问这些路由。
这是我的后台登录:

这是我在Next.js(前端)上保护路由的方式:

const handleLogin = async (e: FormEvent) => {
    e.preventDefault();

    try {
      const response = await axios.post<string>(
        "http://localhost:3003/auth/administrare-site", // Replace with your backend API endpoint
        formData
      );

      // Assuming your backend returns a token on successful login
      const token = response.data;

      // Store the token in local storage or a cookie for future requests
      Cookies.set("token", JSON.stringify(token), {
        expires: 7,
        secure: true,
        sameSite: "strict",
      });

      // Redirect to the dashboard page
      router.push("/dashboard");
    } catch (error) {
      console.error("Error:", error);
    }
  };

这是前端的登录名。这里我有中间件来保护路由:

function requireAuth<T extends JSX.IntrinsicAttributes>(
  Component: React.ComponentType<T>
) {
  return (props: T) => {
    const router = useRouter();

    // Check if the 'token' cookie is present
    const tokenString = Cookies.get("token");
    let token = tokenString;

    console.log(token);
    if (!token) {
      // Redirect to the login page if the token is not present
      console.log('failed')
      router.push("/administrare-site");
      return null;
    }
   
    console.log('good')
    // Render the protected component if the token is present and valid
    return <Component {...props} />;
  };
}

export default requireAuth;

下面是我如何使用requireAuth来保护路由:

export default requireAuth(Dashboard);

所以问题是,在前端,令牌没有经过验证,我不知道如何在不发现我的JWT_SECRET的情况下进行验证(如果我这样做,就不安全)。不要评判我,这是我的第一个全栈应用程序,我会感谢所有的帮助。

owfi6suc

owfi6suc1#

如果你想保持JWT SECRET的安全,你必须在服务器端解码你的JWT。在前端,您只需验证令牌是否存在,因此这是不够的。
您必须在Nest.js上创建一个API控制器,并将令牌从客户端传递到后端并验证它,如果是真的,则将用户从后端重定向到您想要的位置,如果不是,则删除令牌并将用户从后端重定向到登录页面。
你也可以在Next.js的后端做到这一点!你唯一需要做的就是在Next.js后端验证token,然后像我说的那样完成这个过程。

相关问题