javascript - 如何在登录后重定向到页面，同时使用 Express 将 token 作为处理程序发送到中间件

Question

我在我的应用程序中使用 nextJS、express JS 和 JWT。我设置了 2 个页面登录和管理，其中管理页面受到保护，只有在通过 JWT 验证 token 后才能访问。我愿意在成功登录后立即重定向到管理页面。

token 在成功登录后生成并存储在本地存储中，而管理页面则使用验证 token 的中间件进行保护。

这里我面临两个问题:

1) 如何在成功登录后立即重定向？

2)如何将存储在 localstorage 中的 token 作为 header 发送到中间件函数？

请看下面我的代码

// SUBMIT BUTTON CLICK
checkCredential = async e => {
  e.preventDefault();

 const respsonse = await axios.post("/api/admin/login", this.state);
 const { token } = respsonse.data;
 localStorage.setItem("auth-token", token);

};

// THIS END POINT HIT FOR LOGIN CHECKS

login: async (req, res) => {
 const adminExist = await Admin.findOne({ email: req.body.email });
 if (!adminExist) return res.status(400).send("Email doest exists");

 const validPass = req.body.password === adminExist.password;
 if (!validPass) return res.status(400).send("Incorrect Password");

 const token = jwt.sign({ id: adminExist._id }, "KEY_HERE");
 res.set("auth-token", token);
 return res
  .json({ token })
  .redirect(301, "/admin"); //this is working but redirecting isn't reflecting on my screen
}

//  ADMIN PAGE IS PROTECTED BY MIDDLEWARE

 server.get("/admin", verifyToken, (req, res) => {
  return handle(req, res);
});

// MIDDLEWARE VERIFY TOKEN
  verifyToken = (req, res, next) => {
const token = req.header("auth-token");

if (!token) return res.status(401).send("Access Denied");

try {
  const verified = jwt.verify(token, "HEY_HERE");
  req.user = verified;
  next();
} catch (err) {
  res.status(400).send("Invalid Token");
}
};

准确地说，我想在成功登录后立即重定向到管理页面，并且通过用户尝试成功登录、生成 token 并将其存储在本地存储中来实现。 token 立即作为从本地存储获取的 header 传递到中间件(verifyToken)，并且路由重定向到管理页面。

Answer 1

如果我理解正确的话，登录(后端的 ExpressJS)方法会检查用户凭据，仅此而已，所有路由都必须从前端实现。您不会从后端重定向客户端，而是将登录成功或失败的 JSON 对象传递回前端。

login: async (req, res) => {
 //...
 return res
  .json({ token, success: true })
  //this is working but redirecting isn't reflecting on my screen
  //.redirect(301, "/admin");
}

然后在前端(NextJS/ReactJS)中，您通过检查 JWT token 是否有效以及用户是否有权访问资源来实现资源保护。

这对于实现 JWT 后端+前端来说确实是一个很好的资源:https://medium.com/@faizanv/authentication-for-your-react-and-express-application-w-json-web-tokens-923515826e0