Reactjs 私有next.js站点上的简单密码保护

我正在制作一个next.js应用程序，我花了几个小时寻找一种非常简单的密码保护方法。（将由一小群朋友使用）

我曾尝试在我的反向代理上使用Nginx的http auth，这是可行的，但由于登录时间不长，不得不一直登录可能会很烦人。（Nginx的httpauth似乎很快就会“注销”或忘记授权）

我也不想陷入像这样复杂的事情。我不想要用户注册、自定义视图等

我只希望人们能够输入一个密码来查看该网站。我希望它能在他们的浏览器上持久存在，这样他们就不必一直使用Nginx的httpauth登录

有没有一种方法可以在用户通过http身份验证后给他们一个cookie，然后在用户拥有cookie后允许他们进入

---

有人能提出一个相当简单的解决方案吗？提前感谢。

您可以使用Nginx

map

指令来实现这一点，该指令允许您根据另一个变量设置一个变量

在html块内部的某个地方，但在任何服务器块之外，您可以设置map指令

map $cookie_trustedclient $mysite_authentication {
  default  "Your credentials please";
  secret-cookie-value off;
}

这里发生的是Nginx根据名为

trustedclient

的cookie的值设置自定义变量

$mysite\u authentication

的值

默认情况下，

$mysite\u身份验证

将设置为

Your credentials please

，除非您有一个名为

trustedclient

的cookie，其值为

secret cookie value

，在这种情况下，

$mysite\u身份验证

将设置为

off

现在，在已启用基本身份验证的位置块中，您可以更改

auth\u basic

指令以使用新变量，如下所示：

location /secretfiles {
    auth_basic $mysite_authentication;
    auth_basic_user_file .... 
    add_header Set-Cookie "trustedclient=secret-cookie-value;max-age=3153600000;path=/";
}

您可以在此处或在网站代码中设置cookie。结果是，对于具有正确cookie的用户，将

auth_basic

指令设置为

off

，对于没有cookie的用户，将密码框的显示消息设置为

不是超级安全，但对于大多数事情来说都很简单和好

从配置中编辑：

# Map block can go here
map $cookie_trustedclient $mysite_authentication {
  default  "Your credentials please";
  secret-cookie-value off;
}

server {
        listen 443 ssl default_server;
        listen [::]:443 ssl default_server;
 #       ssl     on; # Delete this line, obsolete directive
        ssl_certificate /etc/nginx/cloudflare-ssl/certificate.pem;
        ssl_certificate_key     /etc/nginx/cloudflare-ssl/key.key;

        ssl_client_certificate        /etc/nginx/cloudflare-ssl/cloudflare.crt;
        ssl_verify_client on;

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name ********.com;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
             #   auth_basic "Restricted Content"; # Now this becomes:
                auth_basic $mysite_authentication;
                auth_basic_user_file /etc/nginx/.htpasswd;
                add_header Set-Cookie "trustedclient=secret-cookie-value;max-age=3153600000;path=/";
        }
}

---

非常感谢。这正是我要找的东西。但是我不能让它正常工作。。。我有点困惑“html块”在哪里？在我的站点配置文件中，我只有一个

server{}

块。我将

add_header…

行放在我的位置块中，但我无法通过将其添加到服务器块之外或创建

html{}

块使其工作。你可以看到我的更新，意识到我还有一个错误，但我仍然无法让它工作。每次我关闭并打开浏览器时，它都会再次请求验证。编辑我的答案，请注意位置块中对

auth_basic

指令的更改Edge中没有任何功能。确保cookie已设置，在web代码中设置cookie可能会获得更好的效果，而不是在与同伴的小项目中设置cookie，而不是在金融机构中设置cookie。您有SSL，因此身份验证头将被加密发送，但是任何发现您的cookie值的人都可以进入。cookie头上的过期时间是荒谬的，因此您可能希望将其调低一点，或者不时更改cookie值。