Question

我有一个使用create-react-app创建的简单React应用，我想将其部署到Heroku（或简单的地方）并使用密码保护。保护可以非常简单-只需一个密码即可。

我开始研究HTTP基本身份验证，但没有找到简单的答案。我找到的最接近的是this post，但是（a）我不喜欢必须退出我的应用程序的想法，并且（b）我无法使其正常运行。我希望可以找到一个Heroku插件，但是那里也没有运气。

编写一个包裹我的应用程序并在显示密码之前请求密码的组件并不难。问题在于它执行客户端。我想在服务器端存储正确的密码（或其哈希值），并让该应用程序向服务器发送密码尝试。

由于create-react-app在Node之上运行，所以我希望有一种简单的方法来告诉它执行并在服务器上存储某些内容，但是也许我错了。有什么建议吗？

Answer 1

此create-react-app buildpack似乎支持http基本身份验证：

https://github.com/substantial/create-react-app-buildpack

https://elements.heroku.com/buildpacks/substantial/heroku-buildpack-static

Answer 2

我假设您的意图是保护heroku中的配置变量，以便其他人无法使用您的凭据访问您的数据库。

我用密码保护部署到heroku的方式的方法是使用express和mongoDB在后端创建一个包含我的mLab数据库的Heroku配置变量的keys_prod.js文件：

keys_prod.js文件：

module.exports = {
  mongoURI: process.env.MONGO_URI,
  secretOrKey: process.env.SECRET_OR_KEY
};

keys.js文件：

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./keys_prod');
} else {
  module.exports = require('./keys_dev');
}

在我添加的server.js文件中：

// DB Config
const db = require('./config/keys').mongoURI;

// Server static assets if in production
if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

这使您可以请求在heroku中填写的配置变量，而无需将其包含在存储库中。

Answer 3

如果您在后端使用Node，则可以使用Passport Basic Auth

app.get('*', passport.authenticate('basic', { session: false }), (req, res) => {
  res.sendFile(path.join(`${__dirname}/../build/index.html`))
})

每次在浏览器中访问该页面时，都会出现一个弹出窗口，询问您用户名和密码。

Heroku上React应用的简单密码保护

3 个答案: