如何在 gatsby 中对用户进行身份验证

Question

我已按照 this 教程在我的 gatsby 项目中实施身份验证。问题是我首先设置了项目，路由是从 pages 文件夹进行的，然后我实现了上面的授权代码，但它仍然从 pages 获取路由文件夹，而不是来自 app.js 文件。有人可以帮助我如何从 app.js 路由我的组件，而不是使用 pages 文件夹。

这是我的 gatsby-nodejs 文件

// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

这里是src/pages.app.js

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/layout"
import Home from '../components/dashboard/home/container'
import Login from '../components/marketing/home/pulsemetrics'
import { isLoggedIn } from "../services/auth"


console.log('vvvvvvvvvvvvvvvvvvvvv')

const PrivateRoute = ({ component: Component, location, ...rest }) => {
    console.log('hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjiiiiiiiiiiiiiiiiiii')
  if (!isLoggedIn() && location.pathname !== `/app/login`) {
    // If the user is not logged in, redirect to the login page.
    navigate(`/app/login`)
    return null
  }

  return <Component {...rest} />
}

const App = () => (
  <Layout>
    <Router>
      <PrivateRoute path="/ddddddddddddddddddd" component={Home} />
      <Login path="/" />
    </Router>
  </Layout>
)

export default App

Answer 1

您在 App.js 中的路径应该在它们前面添加 /app/，因为您的 PrivateRoute 逻辑使用它来检查登录。此外，您的 gatsby-node.js 文件真正要说的是，对于以 app 开头的路由，它应该创建一个新页面。您的 src/pages/app.js 的任务是定义应如何创建这些页面（因为它们不是 gatsby 通常生成的静态页面）

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/layout"
import Home from '../components/dashboard/home/container'
import Login from '../components/marketing/home/pulsemetrics'
import { isLoggedIn } from "../services/auth"


console.log('vvvvvvvvvvvvvvvvvvvvv')

const PrivateRoute = ({ component: Component, location, ...rest }) => {
    console.log('hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjiiiiiiiiiiiiiiiiiii')
  if (!isLoggedIn() && location.pathname !== `/app/login`) {
    // If the user is not logged in, redirect to the login page.
    navigate(`/app/login`)
    return null
  }

  return <Component {...rest} />
}

const App = () => (
  <Layout>
    <Router>
      <PrivateRoute path="/app/home" component={Home} />
      <Login path="/app/login" />
    </Router>
  </Layout>
)

export default App

读取 gatsby 客户端专用路由 documentation for reference or have a look at this github issue

如何在 gatsby 中对用户进行身份验证

How to authenticate user in gatsby

javascript

authentication

reactjs

gatsby