我开始创建一个应用程序,但我想不出一些东西。我在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的情况下进行验证(如果我这样做,就不安全)。不要评判我,这是我的第一个全栈应用程序,我会感谢所有的帮助。
1条答案
按热度按时间owfi6suc1#
如果你想保持JWT SECRET的安全,你必须在服务器端解码你的JWT。在前端,您只需验证令牌是否存在,因此这是不够的。
您必须在Nest.js上创建一个API控制器,并将令牌从客户端传递到后端并验证它,如果是真的,则将用户从后端重定向到您想要的位置,如果不是,则删除令牌并将用户从后端重定向到登录页面。
你也可以在Next.js的后端做到这一点!你唯一需要做的就是在Next.js后端验证token,然后像我说的那样完成这个过程。