【全栈必备】Nginx 代理文件目录,访问文件做权限校验

前沿

做后台项目的时候,通常会有文件上传,上传的文件我们放到服务器上的目录,这时候预览下载走我们希望不走自己的服务,用nginx去代理,为了安全,这时候我们就要去做权限的验证了。在这里,我们提供两种方式去做校验,一种是在固定用户名,密码,还有一种方式通过访问API的方式。

固定用户密码验证

  1. 我们先把nginx代理文件目录做下配置
bash 复制代码
server {
    listen 80;
    server_name xxxx.com;

    location /upload-resource {
           # 设置文件目录路径
           alias /root/upload-resource;

           # 是否显示文件目录
           #autoindex on;
       
           # 其他相关配置
           # ...
   
        
    }
}

配置完之后,通过访问http://xxx.com/upload-resource/xxx.jpg,就能查看文件了。这是我们不想谁都能访问,通过输入用户名密码来访问,我们可以这样配置。

  1. 配置密码方式校验 在location中添加如下配置
bash 复制代码
    # 执行权限校验
    auth_basic "Restricted";
    auth_basic_user_file /path/to/htpasswd;

这两个配置的意思是

使用了 auth_basic 指令来进行基本的身份验证,并通过 auth_basic_user_file 指定了存储用户名和密码的文件路径。

你需要将 /path/to/htpasswd 替换为实际的文件目录路径,并提供一个包含正确用户名和密码的密码文件。

你可以使用 htpasswd 工具来生成密码文件,例如:

bash 复制代码
htpasswd -c /path/to/htpasswd username

如果没有 htpasswd这个命令, 可以使用 yum -y install httpd-tools 安装。

生成后的文件内容为

  1. 配置完成后,重启nginx。访问目标文件,会出现用户名密码弹框,

到这里,使用用户名密码的方式就配置完成了。访问文件之前需要输入用户名。

自定义校验

上面只能适用于一些简单的场景。我们在实际项目中,需要通过token去获取用户身份,然后接着判断是否能查看该文件。自定义校验我们需要加个token参数,访问地址为http://xxx.com/upload-resource/xxx.jpg?token=xxx。在这里我们看token作为url中的query参数传递,因为在html中img标签是没办法通过header携带参数。所以我们把token放到的query中。

  1. 在这里我们先提供一个验证api接口,去做鉴权。 api内容为
md 复制代码
// api 地址
http://xxxx.com/api/auth/file

// header参数
{
    Authorization: token
}

该api通过header中的token去获取用户信息,接着去验证权限信息。

  1. nginx配置
bash 复制代码
server {
    listen 80;
    server_name xxxx.com;

    location /upload-resource {
       set $auth_token $arg_token;
       # 发送验证请求到指定 URL
       auth_request /api/auth;
       # 设置文件目录路径
       alias /root/upload-resource;
    }

    location = /api/auth {
    
        # 发送验证请求到自定义验证服务的地址,并将 token 参数通过请求头传递
        proxy_pass http://127.0.0.1:8080/api/auth;
        # 其它配置
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Authorization $auth_token;
    }
}

这个配置中关键点信息

  • auth_request
bash 复制代码
 # 发送验证请求到指定 URL
 auth_request /api/auth;

通过使用 auth_request 指令,Nginx 将发送一个验证请求到 /api/auth 路径,以决定是否允许访问。

  • 提取url参数
bash 复制代码
set $auth_token $arg_token;

在上述配置中,$arg_token表示url中的token参数,然后设置到$auth_token变量中。后续就可以从$auth_token获取token变量。

  • 设置header参数
bash 复制代码
 proxy_set_header Authorization $auth_token;

$auth_token 的值设置为请求头中的 Authorization 字段的值。通过这样的配置,当 Nginx 发送验证请求到自定义验证服务时,会将 $auth_token 的值作为请求头中的 Authorization 字段传递给验证服务。

结束语

通过以上两种方式,我们可以实现nginx代理文件的权限验证。小伙伴可以根据需求自己随意选择。

如果你觉得该文章不错,不妨

1、点赞,让更多的人也能看到这篇内容

2、关注我,让我们成为长期关系

3、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

相关推荐
醉の虾14 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧22 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm32 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep70144 分钟前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter