React/Firebase 托管：为啥在页面刷新时要求用户登录？

Posted 2023-02-22

【中文标题】React/Firebase 托管：为啥在页面刷新时要求用户登录？

【英文标题】：React/Firebase Hosting: Why on a page refresh the user is being asked to login?React/Firebase 托管：为什么在页面刷新时要求用户登录？

【发布时间】：2018-09-21 03:41:37

【问题描述】：

我有一个使用 firebase 数据库部署到 firebase 托管的 react web 应用程序。

在本地运行应用程序 (yarn start) 时，一切都按预期工作...我可以刷新页面，它只会重新加载内容。但是，一旦我将其部署到 firebase 并尝试采取相同的步骤，Web 应用程序就会被重定向到用户必须登录的 https://appengine.google.com。

我正在使用 webpack 构建应用程序并部署到 firebase 我正在使用firebase-tools。

这是一个难以解释的问题，因为我不明白为什么要求用户登录。该网络应用没有登录（身份验证）功能。

webpack 包含以下内容：

  output: 
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  ,

  devServer: 
    historyApiFallback: true,
  ,

为了处理路由，我使用BrowserRouter from react-router-dom：

import  BrowserRouter, Route, Switch  from 'react-router-dom'

<BrowserRouter>
  <Switch>
    <Route
      exact
      path='/projects'
      component=Projects />
  </Switch>
</BrowserRouter>

firebase.json:

  "database": 
    "rules": "rules/rules.json"
  ,
  "hosting": 
    "public": "webapp/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      
        "source": "**",
        "function": "webapp"
      
    ]
  ,
  "functions": 
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  

提前谢谢你！

【参考方案1】：

已修复！

问题是由 rewrites 数组中的函数引起的。这导致 firebase 尝试加载一个名为 webapp 的函数。但是，我没有名为 webapp 的 firebase 函数。

要解决这个问题，我需要使用"destination": "/index.html" 而不是“function”：“webapp”。从而给我们以下firebase.json：

  "database": 
    "rules": "rules/rules.json"
  ,
  "hosting": 
    "public": "webapp/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      
        "source": "**",
        "destination": "/index.html"
      
    ]
  ,
  "functions": 
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"