我已按照本教程在gatsby项目中实现身份验证。问题是我首先设置了项目，路由是从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
由于您的PrivateRoute逻辑使用该路径来检查登录，因此您所拥有的路径App.js应该/app/在它们前面。此外，您的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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句