使用 jwt 身份验证保护静态文件答案

【问题标题】：Protect static files using jwt authentication使用 jwt 身份验证保护静态文件
【发布时间】：2018-01-25 02:44:30
【问题描述】：

我想通过 JWT 身份验证保护static files。没有cookie可以实现吗？据我所知，JWT 最常见的场景是在请求正文或标头中传递令牌，进行 AJAX 调用。但是当浏览器请求静态文件（JS、CSS ...）时，无法在此请求中添加正文。那么唯一的方法是将jwt令牌存储在cookie中吗？还是有其他的？

更新

您对 cookie 有具体的反对意见吗？

我正在阅读文章，每个人都在正文或授权标头中传递 jwt 令牌。我用管理面板开发网站 - SPA 应用程序，所以我想知道，我应该用 cookie 保护这个面板的 html、bundle.js、css 还是只保护 API 并将这些文件公开。只想知道常见的流程是什么。而且我认为，也许有可能以某种方式使用授权标头（如基本身份验证）保护这些文件，但使用 JWT

【问题讨论】：

您始终可以将 JWT 添加到查询参数中：即，将 ?jwt=... 之类的内容附加到引用静态文件的所有 URL。
@DarkFalcon，是的，但是很难手动将此令牌添加到每个请求中，但作为一种选择）
当然可以，但这几乎是 cookie 的唯一选择。您对 cookie 有具体的反对意见吗？
@DarkFalcon，我正在阅读文章，每个人都在正文或授权标头中传递 jwt 令牌。我用管理面板开发网站 - SPA 应用程序，所以我想知道，我应该用 cookie 保护这个面板的 html、bundle.js、css 还是只保护 API 并将这些文件公开。只想知道常见的流程是什么。而且我认为，也许有可能以某种方式使用授权标头（如基本身份验证）但使用 JWT 来保护这些文件。
@asv - 几天来，我一直在用同样的问题把头撞在墙上。由于合作伙伴合同，我必须确保图像。也许它是我的设置，即：快递服务器 -> express.static -> 反应应用程序。用户提交登录 -> 反应将（axios）发布请求发送到快速登录路由；传递用户名/密码 -> express 将request 发送到 JWT 服务 (AuthO) -> express 使用 jwt 令牌响应发布请求 -> react 将令牌保存在 localStorage 中。我有另一条图像路线，但我看不到如何将 jwt mid ware 添加到该请求中。任何帮助将不胜感激。

标签： node.js express authentication authorization jwt

【解决方案1】：

通常没有必要保护静态资产（例如.html、.css、.png、.js 等）文件并保护您的 API 端点就足够了。

但是，如果您使用 AJAX 检索资产（例如 SPA 的 HTML 片段），那么您可以在请求中将 JWT 作为标头传递，并且在后端您的 Web 服务器可以检查标头并仅返回 HTML 片段如果当前用户被授权访问它。

您还可以将 JWT 存储在 local storage 中并配置您的 AJAX 库以从本地存储中获取令牌并将其添加到您的请求中，然后再将其发送到服务器。

【讨论】：

我有一个二进制（静态文件）要以这种方式保护。我可以在 Webserver 中托管这个静态文件并使用 JWT 访问它吗？在这种情况下，如果用户尝试在没有 JWT 的情况下点击文件 URL 会发生什么？

【解决方案2】：

我不知道您的确切意思是什么，但我认为您想保护指定的静态文件，例如个人图像或其他文件。

如果像我想的那样，您可以.use(jwt) 在.use(static) 文件之前保护您指定的静态文件。

例如：

const express = require("express");
const app = express();
const exjwt = require("express-jwt");
const STATIC_PATH = path.join(process.cwd(), "src", "static");

app
  .use("/images", exjwt({ secret: "SECRET" }))
  .use(express.static(STATIC_PATH))

app.get('/', (req, res) => {
   res.send('...') 
});

app.listen(3000);

这样，用户可以请求您的静态文件，除了静态图像文件。

【讨论】：