【全栈必备】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、关注公众号「前端有话说」,里面已有多篇原创文章,和开发工具,欢迎各位的关注,第一时间阅读我的文章

相关推荐
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓4 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js