如果使用JWT，如何保护路线免受客人和角色的影响？

Question

在服务器端，我有2个中间件——protect(登录了吗？)和restrictTo(检查用户的角色)。如果不允许，这些中间件会阻止用户或访客执行某些操作

exports.protect = catchAsync(async (req, res, next) => {
  let token;

  if (
    req.headers.authorization && req.headers.authorization.startsWith("Bearer")
  ) {
    token = req.headers.authorization.split(" ")[1];
  }

  if (!token) {
    return next(new AppError("You are not signed in!", 401));
  }

  const decodedToken = await promisify(jwt.verify)(
    token,
    process.env.JWT_SECRET
  );

  const currentUser = await User.findById(decodedToken.id);
  if (!currentUser) {
    return next(new AppError("User with such token no longer exists"));
  }

  req.user = currentUser;
  next();
});


exports.restrictTo = (...roles) => {
  return (req, res, next) => {
    if (!roles.includes(req.user.role)) {
      return next(new AppError("No access", 403));
    }
    next();
  };
};

但是如何在客户端保护路由呢？如果不允许我发布新消息，那么我应该被阻止进入 /newnote页面，这样我就看不到并填写表单。JWT令牌存储在带有http唯一标志的cookie中。因此我无法从Vue路由器访问令牌。将用户角色存储在Vuex中？那么如何在cookie和Vuex中同步令牌状态？如果我的令牌在服务器端被销毁，我仍然可以将其保存在Vuex中，直到我向受保护的endpoint发送请求。我应该为受保护的路由请求一个特殊的身份验证endpoint，以便使用befor每检查我当前的角色吗？

Answer 1

基本上，您应该添加两件事：

< li >存储当前认证的用户。默认情况下，authUser为空。当有人登录时，authUser是一个包含用户数据的对象。你可以把它保存在Vuex，localStorage等等。 < li >在您用于api请求的任何库中创建一个拦截器/中间件。如果在某个时候你得到一个401/403，这意味着当前用户的会话已经过期，或者他正在试图访问一个他不应该看到的受保护的区域。无论采用哪种方法，都需要将本地authUser重置为null，并重定向到login。

在Spa/移动设备中，只要您的后端得到适当的保护，您就不必太担心这一点。如果您的 authUser 逻辑正确，那么只有恶意用户才会尝试访问受保护区域，而普通用户将遵守规则，并且永远不会以当前权限访问他们不应该访问的页面（假设 UI 已正确连接......